/* app.css —— 全站唯一样式文件（2026-09-15 由 9 个 CSS 合并） 【为什么合并】本系统靠手工上传部署，文件越多越容易漏传 / 传错层次。 合并为 1 个文件后：只需上传 1 个文件、只需 1 个 。 */
/* 公共基础规范（公共 CSS 基础层）v1 · 2026-09-07 所有页面（主系统 / 收款单据 / 产品价格 / 强泰价格）统一引用本文件。 控件标准值只在这里定义一次，各页面规则通过 var() 引用。 */
/* 全站标准字体链（系统字体栈 System Font Stack） 写法遵循行业惯例… */
:root {
--ctl-h: 34px;
--ctl-fs: 15px;
--ctl-radius: 4px;
--ctl-border: #ddd;
--modal-top: min(11vh, 80px);
--ctl-pad-sm: 0 12px;
--ink: #1f2733;
--fs-body: 15px;
--fs-table: 14px;
--th-pad: 10px 14px; /* 列表表头统一内边距（合同/产品/强泰/收款四页一致） */
--fs-label: 14px; /* 表单标签字号 */
--fs-section: 16px; /* 表单分组标题字号（必须 ≥ --fs-body：标题不能比它引导的内容小） */
--fs-total: 16px; /* 合计行标签（合同 / 收款两处表单必须同值） */
--fs-amount: 18px; /* 合计金额数字 */
--fs-toast: 13px; /* 右下角提示条字号 */
--fs-caption: 13px; /* 说明性小字（表单下方的提示、附注） */
--lh-heading: 1.3; /* 标题行高（正文用 body 的 1.6，标题要更紧） */
--space-label: 8px; /* 表单标签与控件的间距（8px 网格 × 1） */
--space-row: 8px; /* 同一分组内紧邻行的间距（8px 网格 × 1） */
--space-form: 16px; /* 表单字段间距（8px 网格 × 2） */
--space-form-group: 24px; /* 表单分组间距（8px 网格 × 3） */
--radius-card: 8px; /* 卡片 / 表格容器圆角 */
--radius-modal: 10px; /* 弹窗圆角 */
/* 搜索框统一宽度（合同列表 / 产品价格 / 强泰价格 / 收款单据 / 开票）。
300 是**量出来的**：开票那条最长占位符文字 272px + 左右内距与边框 26px = 298px ✓
（原来 260 会把开票的占位符切掉 ✗；合同列表当时靠一句内联 width:300px 侥幸躲过 ✗ 已删）。 */
--search-w: 300px;
--op-gap: 8px; /* 操作列按钮统一间隙（合同 / 产品 / 强泰 / 收款四页一致） */
--sidebar-w: 230px; /* 左侧导航栏宽度（.sidebar 用它；合同预览弹窗也用它来避开导航栏） */
/* ===== 色板（全站唯一来源，改配色只改这一块）===== */
/* 品牌色 */
--brand: #2563eb; /* 主蓝：主按钮 / 链接 / 聚焦 / 选中 */
--brand-dark: #1d4ed8; /* 主蓝（深）：hover */
--brand-soft: #eff6ff; /* 主蓝（浅底）：聚焦底 / 选中底 / 编辑中 */
/* 功能色 */
--danger: #dc2626; /* 危险：删除 / 负数 / 必填 */
--danger-border: #fca5a5;/* 危险按钮边框 */
--danger-soft: #fef2f2; /* 危险底：删除行 hover */
--success: #16a34a; /* 成功提示 */
/* 文字色（由深到浅） */
--ink: #1f2733; /* 主文字 / 表头文字 */
--ink-2: #334155; /* 表格正文 */
--ink-soft: #64748b; /* 次要说明文字 */
--ink-faint: #94a3b8; /* 占位符 / 空状态 / 极淡说明 */
--ink-label: #475569; /* 表单标签 */
/* 线条色 */
--line: #e6eaf0; /* 卡片边框 / 分割线 */
--line-soft: #eef2f7; /* 更淡的分割线 */
--line-table: #e2e8f0; /* 表格线 */
/* 底色 */
--surface-hover: #f1f5f9;/* hover 底 / 表头底 */
--surface-alt: #f8fafc; /* 斑马纹 / 次级底 */
--row-hover: #e0f2fe; /* 表格行 hover 底色（全站统一） */
--bg: #f4f6fa; /* 页面底色 */
--panel: #ffffff; /* 卡片 / 面板底色 */
--canvas: #e9edf3; /* 弹窗画布底色（预览纸外 / 编辑表单外 / 收据详情） */
--mask: rgba(15,23,42,.45); /* 弹窗遮罩（全站各弹窗共用，原来抄了 9 份） */
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
/* 表单控件（input / textarea / select / button）浏览器默认字体是 Arial，
且不会继承 body，必须显式指定，否则页面是雅黑、输入框却是 Arial。
这是全站公共规则，一次定义四个页面生效。 */
input, textarea, select, button {
font-family: var(--font-sans);
}
/* 搜索框聚焦态（四页统一） 四个页面搜索框选择器不同：合同列表 .search-input(#q) / 产品价格 #q / 强泰价格 .search / 收款单据 .rc-search，这里一次性全部覆盖。 */
.search-input:focus,
#q:focus,
.search:focus,
.rc-search:focus {
outline: none;
border-color: var(--brand);
box-shadow: none;
}
::placeholder {
color: var(--ink-faint); /* #94a3b8 统一占位灰，不依赖浏览器默认 #757575 */
font-size: inherit; /* 跟随输入框字号 15px */
opacity: 1; /* 用颜色本身控制深浅，不再叠透明度 */
}
/* 下拉框（select）全站统一箭头 去掉各浏览器原生黑箭头，统一为品牌蓝「描边空心 V」（与合同列表 .ctl-select 同款：10×6px、#2563eb 描边 1.4、右距 10px、右侧留 28px）。 */
select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background: transparent !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 10px 6px !important;
padding-right: 28px !important;
}
input, textarea, select { color: var(--ink); }
/* —— 按钮 —— */
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--ctl-fs);height:var(--ctl-h);padding:0 16px;box-sizing:border-box;border-radius:var(--ctl-radius);border:1px solid transparent;cursor:pointer;font-weight:500;font-family:inherit}
.btn-primary{background:var(--brand);color:var(--panel)}
/* 【2026-09-22 已合并 ✗→✓】原 `.btn-primary:hover{background:var(--brand-dark)}` ——
已并入下方**唯一那条**主按钮悬停规则（搜「把"主按钮悬停"合并成」✓ 在第 3003 行附近 ✓）。
⚠ 以后改主按钮悬停，去那一条 ✓ 不要在这里写 ✗。 */
.btn-ghost{background:var(--panel);color:var(--ink-label);border-color:var(--ctl-border)}
/* 开票汇总弹窗工具栏的「复制为图片」：裸 .btn 在弹窗里没边框（基础 .btn 是 transparent 边框 ✗）
→ 补一条边框，与旁边的「关闭」（.btn-ghost）常态一致 ✓ */
.inv-mask .inv-modal .toolbar .btn:not(.btn-primary){border-color:var(--ctl-border)}@media (hover: hover) {
/* 【2026-09-23 用户要求·新建合同里那两个 ⚙「管理规格型号选项 / 管理单位选项」】 它们的悬停原来是"只变浅灰底" ✗ → 用户要求跟工具栏那排一致 = **白底 + 蓝框 + 蓝字** ✓。 */
.btn.btn-ghost:hover{background:var(--panel);border-color:var(--brand);color:var(--brand)}
}
.btn-danger{background:var(--panel);color:var(--danger);border-color:var(--danger-border)}
/* ⚠ 必须写成 `.btn.btn-soft`（两个类）✓ —— 只用 `.btn-soft` 无效 ✗： 本文件后面（第 ~469 行）还有一条基础 `.btn{background:var(--panel); */
.btn.btn-soft{background:var(--brand-soft);color:var(--brand);border-color:#bfdbfe}@media (hover: hover) {
.btn.btn-soft:hover{background:#dbeafe;border-color:#93c5fd;color:var(--brand-dark)}
}
.btn.btn-soft:active{background:#dbeafe}
/* —— 行内操作链接 —— */
.link{color:var(--brand);cursor:pointer;font-size:14px;white-space:nowrap;margin-right:var(--op-gap);vertical-align:middle}
.link:last-child{margin-right:0}
/* —— 空状态（全站唯一实现 ✓）—— 历史名字 .rc-empty / .list-empty 共用同一套 ✓；
容器内的小空态（抬头库 / 调价历史弹窗）留白小一号 ✓ */
.empty,
.rc-empty,
.list-empty,
.invp-empty,
.hist-empty,
.price-app .hist-empty { text-align: center; color: var(--ink-faint); font-size: 14px; }
.empty,
.rc-empty,
.list-empty { padding: 40px 0; }
/* 表格内空态：`.data td` 的内边距特异性更高，会把它压成 9px ⇒ 这里提一级 ✓ */
table.data td.empty { padding: 40px 0; }
.invp-empty { padding: 26px 14px; }
.hist-empty,
.price-app .hist-empty { padding: 20px; }
/* —— 弹窗遮罩 —— */
.mask{position:fixed;inset:0;background:var(--mask);display:none;align-items:flex-start;justify-content:center;padding:var(--modal-top) 0;z-index:50;overflow:auto}
.mask.show{display:flex}
:is(.mask, .pwd-mask, .spec-manage-mask, .rc-modal-mask) > .modal{background:var(--panel);border-radius:var(--radius-modal);width:560px;max-width:94vw;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.2)}
:is(.mask, .pwd-mask, .spec-manage-mask, .rc-modal-mask) > .modal h3{margin:0;padding:14px 18px;font-size:15px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
:is(.mask, .pwd-mask, .spec-manage-mask, .rc-modal-mask) > .modal .body{padding:16px 18px;overflow:auto;flex:1 1 auto}
:is(.mask, .pwd-mask, .spec-manage-mask, .rc-modal-mask) > .modal .foot{padding:12px 18px;border-top:1px solid var(--line-soft);display:flex;gap:10px;justify-content:flex-end;flex:0 0 auto}
:is(.mask, .pwd-mask, .spec-manage-mask, .rc-modal-mask) > .modal.modal-xs{width:360px}
:is(.mask, .pwd-mask, .spec-manage-mask, .rc-modal-mask) > .modal.modal-sm{width:480px}
:is(.mask, .pwd-mask, .spec-manage-mask, .rc-modal-mask) > .modal.modal-md{width:720px}
:is(.mask, .pwd-mask, .spec-manage-mask, .rc-modal-mask) > .modal.modal-lg{width:1280px}
/* —— 表单字段 —— */
.field input,.field select{width:100%}
.row2{display:flex;gap:12px}
.row2 .field{flex:1}
.err{color:var(--danger);font-size:12px;min-height:16px;margin-top:4px}
.pager{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;color:var(--ink-soft);font-size:var(--ctl-fs);font-family:var(--font-sans)}
.pager b{color:var(--ink);font-weight:500}
.pager-sp{flex:1}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:var(--panel);border:1px solid var(--ctl-border);border-radius:var(--ctl-radius);padding:0 14px;height:var(--ctl-h);font-size:var(--ctl-fs);font-weight:500;color:var(--ink-label);cursor:pointer;font-family:var(--font-sans);box-sizing:border-box;flex:0 0 auto;white-space:nowrap}@media (hover: hover) {
.pg-btn:hover:not(:disabled){background:var(--surface-hover)}
}
.pg-btn:disabled{opacity:.5;cursor:default}
.toast{position:fixed;top:18px;left:50%;transform:translate(-50%,-8px);z-index:200000;background:var(--ink);color:var(--panel);padding:12px 18px;border-radius:var(--radius-card);box-shadow:0 8px 30px rgba(0,0,0,.2);font-size:var(--fs-toast);opacity:0;transition:all .25s;pointer-events:none;max-width:360px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--success)}
.toast.warn{background:#b45309}
.pwd-mask{position:fixed;inset:0;background:var(--mask);z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding-top:var(--modal-top);overflow:auto} /* 弹窗略偏上（约 11vh 处）而不是几何正中：视觉重心更舒服，主流设计系统都是这么做的 ✓
overflow:auto ⇒ 说明文字多、弹窗比视口还高时能滚动，不会把底部按钮裁掉 ✓ */
.pwd-desc{font-size:13px;color:var(--ink-soft);margin:0 0 12px;white-space:pre-wrap}
.pwd-input{width:100%;box-sizing:border-box;height:var(--ctl-h);padding:0 12px;font-size:var(--ctl-fs);border:1px solid var(--ctl-border);border-radius:var(--ctl-radius);background:var(--panel);color:var(--ink);outline:none;font-family:var(--font-sans)}
.pwd-input:focus{border-color:var(--brand)}
.pwd-err{color:var(--danger);font-size:12px;min-height:16px}
/* 【2026-09-26 用户要求·取消按钮统一】「确定 / 取消」改用全站标准 .btn 体系 ✓ （原来用本组件专属 .pwd-ok / .pwd-cancel ✗ —— 其中「取消」的悬停只变浅灰… */
.pwd-mask > .modal .foot .btn{flex:1}
:root {
/* 公共色板 / 字号 / 圆角统一定义在 base.css（本文件之前加载），这里不再重复定义， 避免同名变量把公共值覆盖回旧色（历史坑：这里曾定义 --primary:var(--brand)… */
/* --bg / --panel 已上提到 base.css（页面底色 / 卡片底色，全站通用） */
--accent: #0fb39a; /* 青绿强调色（目前用于：开票汇总「复制为图片」按钮，移动端醒目 ✓） */
--shadow: 0 1px 3px rgba(20, 30, 50, .06), 0 6px 24px rgba(20, 30, 50, .06);
/* 旧命名别名，指向 base.css 公共色板，方便老代码不动即可统一（勿在此改值） */
--primary: var(--brand);
--primary-dark: var(--brand-dark);
--primary-soft: var(--brand-soft);
}
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
font-size: var(--fs-body);
line-height: 1.6;
}
/* layout */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar {
width: var(--sidebar-w); flex-shrink: 0; /* 宽度见 :root 的 --sidebar-w */
background: #0f1b33;
color: #cdd6e6;
display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh; height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.sidebar .brand {
/* 74px 定高 + 水平/垂直居中 —— 别改回内边距撑高（一改字号就偏）✓ */
background: #1c2c50; /* 与侧栏对比度 1.25:1（行业"一档"；低于 1.15 就看不出来了）✓ */
height: 74px;
display: flex; align-items: center; justify-content: center;
gap: 10px;
padding: 0 20px;
font-size: 18px; font-weight: 700; color: var(--panel);
letter-spacing: .5px;
}
.sidebar .brand .brand-mark { display: flex; flex: 0 0 auto; }
.sidebar .brand .brand-mark svg { width: 28px; height: 28px; display: block; }
.nav { padding: 12px 0; flex: 1; }
.nav a {
display: flex; align-items: center; gap: 10px;
padding: 11px 20px; margin: 0; border-radius: 0;
border-left: 3px solid transparent; /* 左侧指示条位（参考对账管理页，2026-09-15 加） */
color: #cdd6e6; text-decoration: none; cursor: pointer; font-size: 14px;
transition: background .15s, color .15s, border-color .15s;
}@media (hover: hover) {
.nav a:hover { background: rgba(255,255,255,.06); color:var(--panel); }
}
.nav a.active { background: var(--brand-dark); color: var(--panel); border-left-color: #60a5fa; }
/* 【预留·二级菜单规格】将来加子菜单时按这套加，不用重新算（现在不生效）： 父级（含当前页，展开/收起）：浅底 + 左侧 3px 亮条… */
/* 侧栏导航图标：线性 SVG（18px，颜色跟随文字 currentColor）。
未选中时略淡(0.78)、hover/选中时满色 —— 这是"现代后台"导航的常见处理，
视觉上把注意力留给当前页，而不是一排一样重的图标。 */
.nav a .ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; opacity: .78; transition: opacity .15s; }
.nav a .ico svg { width: 18px; height: 18px; display: block; }
.nav a:hover .ico, .nav a.active .ico { opacity: 1; }
.hamburger svg { width: 22px; height: 22px; display: block; }
.nav-sep { height: 1px; background: rgba(255,255,255,.08); margin: 8px 0; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
height: 60px; background: var(--panel); border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
padding: 0 26px; position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 20px; margin: 0; font-weight: 650; }
.topbar .sub { color: var(--ink-soft); font-size: 13px; }
.topbar .topbar-logout {
display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
border: 1px solid var(--line); border-radius: 8px;
color: var(--ink-soft); font-size: 13px; text-decoration: none;
background: var(--panel); transition: border-color .15s, color .15s;
}@media (hover: hover) {
.topbar .topbar-logout:hover { border-color: var(--primary); color: var(--primary); }
}
.content { padding: 26px; max-width: 1400px; width: 100%; margin: 0 auto; }
/* 产品图册：iframe 填满内容区 */
.content.catalog-frame { padding: 0; max-width: none; height: calc(100vh - 61px); height: calc(100dvh - 61px); position: relative; background: #f4f6f6; }
.content.reconcile-frame { padding: 0; max-width: none; height: calc(100vh - 61px); height: calc(100dvh - 61px); position: relative; background: #f4f6f6; }
.content.reconcile-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #f5f6f8; }
.content.catalog-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #f5f6f8; position: relative; z-index: 1; color-scheme: light; }
/* 电子签章：原生视图，填满内容区（顶栏由工作台统一提供） */
.content.seal-view { padding: 0; max-width: none; height: calc(100vh - 61px); height: calc(100dvh - 61px); width: 100%; position: relative; }
/* cards */
.card {
background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 20px;
}
.card + .card { margin-top: 18px; }
.card h2 { font-size: 18px; margin: 0 0 16px; font-weight: 650; }
.contract-items-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.contract-items-head h2 { margin: 0; }
.contract-items-head .spacer { flex: 1; }
/* 窄屏用的短文案（桌面显示 .ci-long 完整文案，手机切到 .ci-short 短文案 —— 见下面媒体查询） */
.contract-items-head .ci-short { display: none; }
@media (max-width: 1080px) {
.contract-items-head { gap: 6px; margin: 0 0 12px; }
.contract-items-head h2 { font-size: 16px; white-space: nowrap; }
.contract-items-head a.btn { font-size: 14px; padding: 6px 8px; line-height: 1.25; white-space: nowrap; }
.contract-items-head .ci-long { display: none; }
.contract-items-head .ci-short { display: inline; }
}
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; }
.stat {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card);
padding: 18px 20px; box-shadow: var(--shadow);
}
.stat .label { color: var(--ink-soft); font-size: 13px; }
.stat .value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.stat .value.small { font-size: 20px; }
.stat.clickable { cursor: pointer; transition: background .15s, border-color .15s; }@media (hover: hover) {
.stat.clickable:hover { background: #f4f7fb; border-color: #c5cdd8; }
}
/* 【2026-09-23 用户反馈·"弹窗的按钮点一下会闪一下的颜色"】 实测查证 ✓… */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
/* 【2026-09-23 用户反馈·"可以了，但手感确实发死"✓ 说得对 ✓】上一版四处不够 ✓ 逐条抠… */
.btn:active,
.rc-btn:active,
.pg-btn:active, .dp-btn:active, .dp-day:active, .cf-chip:active,
.col-funnel:active, .r-fab:active {
transition-duration: 0s;
background: #e2e8f0;
transform: scale(.97);
}
.dp-lnk:active, .cf-btn:active, .ric:active, .thumb:active,
.invp-item:active, .inv-drop-item:active,
.pic-drop:active, .seal-drop:active, .rc-sum:active, .ltoggle:active {
transition-duration: 0s;
background: #e2e8f0;
}
.btn-primary:active, .btn-export-primary:active, .rc-btn-primary:active { transition-duration: 0s; background: var(--brand-dark); }
.btn-danger:active, .rc-btn-danger:active { transition-duration: 0s; background: var(--danger-soft); }
.link:active, .rc-link:active, .op-link:active { transition-duration: 0s; opacity: .55; }
}
/* buttons */
.btn {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
border: 1px solid var(--ctl-border); background: var(--panel); color: var(--ink);
height: var(--ctl-h); padding: 0 15px; box-sizing: border-box;
border-radius: var(--ctl-radius); font-size: var(--ctl-fs); font-weight: 500;
font-family: var(--font-sans);
transition: all .15s; text-decoration: none; line-height: 1;
}@media (hover: hover) {
.btn:hover { border-color: #c7cfdb; background: var(--surface-hover); }
}
.mask .btn:not(.btn-primary):not(.btn-danger):not(.btn-soft):not(.btn-export-primary):not(.btn-ghost),
.inv-mask .btn:not(.btn-primary):not(.btn-danger):not(.btn-soft):not(.btn-export-primary):not(.btn-ghost),
.spec-manage-mask .btn:not(.btn-primary):not(.btn-danger):not(.btn-soft):not(.btn-export-primary):not(.btn-ghost),
.rc-modal-mask .btn:not(.btn-primary):not(.btn-danger):not(.btn-soft):not(.btn-export-primary):not(.btn-ghost),
.pwd-mask .btn:not(.btn-primary):not(.btn-danger):not(.btn-soft):not(.btn-export-primary):not(.btn-ghost) {
color: var(--ink-label);
}
.btn.btn-primary{ background: var(--brand); border-color: var(--brand); color: var(--panel); font-weight: 500; border-radius: 4px; height: 34px; padding: 0 16px; box-sizing: border-box; }
/* 工具栏按钮字号统一：与搜索框 / 下拉框同一标准（值来自 base.css --ctl-fs） */
.list-toolbar .btn { font-size: var(--ctl-fs); }
/* 批量删除：红色文字 */
.list-toolbar .btn.btn-danger{ color: var(--danger) !important; border-color: var(--danger-border) !important; font-weight: 500; background:var(--panel) !important; }@media (hover: hover) {
.list-toolbar .btn.btn-danger:hover{ background: var(--danger-soft) !important; }
}
/* 「批量导入」：原来靠 [style*="0fb39a"] 去**匹配标签上的内联颜色** ✗
（等于在样式表里"猜"内联写了什么 ✗ 内联一改这里就静默失效 ✗）→ 已改成正式类名 .btn-import-ghost ✓
观感不变（深色字 + 灰边 ✓，就是上面那句青绿被覆盖后的结果 ✓）。 */
.list-toolbar .batch-bar > .btn.btn-import-ghost { color: var(--ink) !important; border-color: #e2e2e2 !important; }
/* 批量栏其余按钮（批量改状态 / 批量导出）文字统一成深色 ——
上面那条 .list-toolbar .btn 给的是 --ink-label（灰蓝 #475569），在这一排里会显得跟别人不是一个色 */
.list-toolbar .batch-bar > .btn:not(.btn-danger):not(.btn-primary) { color: var(--ink); }
/* 批量改状态按钮壳（灰框同全部状态）；select 本体字号/颜色/高度在下方「下拉框统一基类」 */
.list-toolbar .batch-bar > div.btn {
height: var(--ctl-h); box-sizing: border-box; padding: 0; display: inline-flex; align-items: center;
border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--panel);
}
.list-toolbar .batch-bar > div.btn > select {
padding: 0 24px 0 10px !important;
background: transparent !important; border: none !important;
outline: none; /* 原来写在内联 ✗ → 收进来 ✓ */
/* base.css 统一 appearance:none 后本 select 的原生箭头被去掉，这里补同款 V 形（同移动端写法） */
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 6px center !important;
background-size: 10px 6px !important;
cursor: pointer;
}
.btn.btn-sm{ height: var(--ctl-h); padding: 0 14px; font-size: var(--ctl-fs); border-radius: var(--ctl-radius); }
/* 按钮「处理中」：变淡 + 点不动（图标与文字位置都不变，不跳动 ✓）。
⚠ 配合 Util.btnBusy() 用 ✓ —— 没有 disabled 属性，只有这条 pointer-events 能拦住它 ✓。 */
.btn.is-busy, .rc-btn.is-busy { opacity: .65; pointer-events: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* table */
/* 使用 border-collapse: separate 而非 collapse，避免 Chrome/Edge 在缩放/高分屏下
出现 position:sticky 表头被下方数据行穿透的渲染 bug（边框线仍然保留） */
table.data {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
table.data th,
table.data td {
border: 1px solid var(--line-table);
border-width: 0 1px 1px 0;
}
table.data td:first-child,
table.data th:first-child {
border-left-width: 1px;
}
table.data th {
text-align: left; padding: var(--th-pad);
background: var(--surface-hover);
border-top-width: 1px;
border-bottom: 1px solid var(--line-table);
font-weight: 600; color: var(--ink);
font-size: var(--fs-table); white-space: nowrap; transition: background .15s, color .15s;
position: sticky; top: 0; z-index: 3;
backface-visibility: hidden;
}
table.data td {
text-align: left; padding: 9px 12px; font-size: var(--fs-table); /* 【2026-09-20】写死 14px → 变量（值相同 ✓） */
background: var(--panel);
/* 给 td 建立独立层叠上下文并置于 z-index:1，确保 sticky 表头在滚动时始终覆盖数据行 */
position: relative; z-index: 1;
}
table.data thead th { cursor: default; }
table.data th.sort-col { cursor: pointer; user-select: none; }@media (hover: hover) {
table.data th.sort-col:hover { background: var(--row-hover); color: var(--brand-dark); }
}
table.data th.sort-col.sort-active { color: var(--brand-dark); }
table.data th.sort-col .sort-arrow { margin-left: 2px; font-size: 10px; opacity: .5; transition: opacity .15s, color .15s; }
table.data th.sort-col.sort-active .sort-arrow { opacity: 1; color: var(--brand-dark); }
table.data tr { cursor: pointer; }@media (hover: hover) {
table.data tr:hover td { background: var(--row-hover); }
}
table.data tr.hover-row td { background: var(--row-hover); }
table.data tr.selected-row td { background: #eef6ff; }@media (hover: hover) {
table.data tr.selected-row:hover td { background: #e0efff; }
}
table.data tr.selected-row.hover-row td { background: #e0efff; }
/* 合同列表表格统一微软雅黑（覆盖全局宋体），与新建合同页/工具栏一致，仅改字体不动布局 */
.list-scroll table.data, .list-scroll table.data th, .list-scroll table.data td, .list-scroll table.data * {
font-family: var(--font-sans);
}
/* 合同编号列强制不换行（微软雅黑比宋体宽，140px 放不下会分行） */
.list-scroll table.data .col-no { white-space: nowrap; }
/* 合同列表数字/金额列右对齐（行业标准：数字按位对齐，一眼比大小）+ 等宽数字纵向严丝合缝 */
.list-scroll table.data th.col-num,
.list-scroll table.data td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.content.list-page {
display: flex;
flex-direction: column;
height: calc(100vh - 61px); height: calc(100dvh - 61px); /* topbar 60px + 1px border */
overflow: hidden;
padding: 8px;
max-width: none;
}
.content.list-page .card { padding: 12px; }
/* 【2026-09-21 用户反馈·"这两个高度不一样"】装着**页脚**的那张卡片，底部不要再垫一层 ✗： 页脚（.pager）自己已经有 12px 下留白 ✓（上 12 / 下 12 对称 ✓）… */
.content.list-page .card:has(#pager) { padding-bottom: 0; }
/* 【2026-09-21 用户要求·"要，改成完全一样"】合同列表 / 劲羽开票 对齐收款单据 ============ 收款单据那套（用户指定的基准）= 卡片内**表格贴边** ✓、页脚外壳左右缩进 16px ✓、卡片外灰边 12px ✓。 */
@media (min-width: 1081px) {
.content.list-page { padding: 12px; }
.content.list-page .list-table-card { padding: 0; }
.content.list-page .list-table-card .list-meta { padding: 12px 16px 0; }
.content.list-page .list-table-card #pager {
padding-left: 16px; padding-right: 16px;
}
}
/* 【2026-09-21 实测·桌面端补 12px】多宽度核对报出： 间距③ 工具栏卡内边距：合同 25px ✓ vs 我那三页 13px ✗（差 12px） 原因 ✓：合同那页的"卡"自己带 20px 内边距 ✓； */
.content.list-page .card + .card,
.invoice-app .card + .card { margin-top: 12px !important; } /* 合同 ✓ 开票 ✓ */
.content:is(.price-host, .qtprice-host, .receipt-host) .rc-card-toolbar { margin-bottom: 12px !important; }
.content:is(.price-host, .qtprice-host, .receipt-host) .rc-card-body { margin-top: 0 !important; }
@media (min-width: 1081px) {
.content:is(.price-host, .qtprice-host, .receipt-host) .rc-card-toolbar { padding: 12px; }
.content:is(.price-host, .qtprice-host, .receipt-host) .rc-card-toolbar .rc-toolbar { padding: 0; }
.content:is(.price-host, .qtprice-host, .receipt-host) .rc-card-toolbar { margin-bottom: 12px; }
.content:is(.price-host, .qtprice-host, .receipt-host) .rc-card-body { margin-top: 0; }
.invoice-app .card.inv-toolbar { padding: 12px !important; }
}
.content.list-page .list-filter-card { flex: 0 0 auto; }
.content.list-page .list-table-card {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.content.list-page .list-table-card .list-meta { flex: 0 0 auto; }
/* #listBox 是 .list-scroll 的父容器，必须也是 flex 容器，.list-scroll 的 flex:1 才会生效 */
.content.list-page .list-table-card #listBox {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.content.list-page .list-table-card #listBox .list-scroll {
flex: 1;
min-height: 0;
overflow: auto;
scrollbar-gutter: stable;
position: relative; /* 建立独立层叠上下文，配合 sticky 表头正确裁剪 */
}
.content.list-page .list-table-card #pager { flex: 0 0 auto; }
.list-scroll table.data { table-layout: fixed; }
/* 手机/平板端卡片视图：桌面端默认隐藏，≤1080px 时由下方媒体查询显示。电脑端布局完全不受影响 */
.list-cards { display: none; }
.batch-bar { display:flex; gap:10px; align-items:center; }
/* 列表页：筛选卡片内「左筛选 / 右操作」分区 */
.list-toolbar {
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
font-family: var(--font-sans);
}
/* 工具栏下拉框统一基类：全部状态 / 批量改状态 共用。改字号、颜色、高度只改这里一处（值来自 base.css 公共变量） */
.list-toolbar > select#statusFilter,
.list-toolbar .batch-bar div.btn select {
font-size: var(--ctl-fs) !important;
color: var(--ink) !important;
}
/* ⚠ 高度**必须按层级分开写** ✗→✓（2026-09-22 根因修复 ✓）—— */
.list-toolbar > select#statusFilter { height: var(--ctl-h) !important; }
.list-toolbar .batch-bar div.btn select { height: 100% !important; }
/* 全部状态：自身带边框，差异部分单独写 */
.list-toolbar > select#statusFilter {
/* 全局那条「裸 select 满宽」会把它拉长 ✗ —— 原来靠标签上的内联 width:auto 顶着 ✗，现在收进这里 ✓ */
width: auto !important;
padding: 2px 28px 2px 12px !important;
line-height: 1 !important;
border-radius: var(--ctl-radius) !important; box-sizing: border-box !important;
border: 1px solid var(--ctl-border) !important; background: var(--panel);
}
/* 列表页：表格卡片顶部信息条（共 N 个合同 / 已选 M 条） */
.list-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; }
.meta-left { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.meta-stats { display:flex; align-items:center; gap:10px; }
.meta-actions { display:flex; align-items:center; gap:8px; }
.list-meta b { color:var(--ink); font-weight:600; }
.list-meta .meta-sel { color:var(--danger); }
/* 批量导入弹窗的正文（原来写在那段手画弹窗的内联里 ✗ → 收进母本弹窗后用这条管 ✓） */
#importMsg { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }
/* 列表页：导出按钮（T3 扁平极简，与工具栏统一） */
.btn.btn-export { display:inline-flex; align-items:center; gap:7px; padding:0 14px; border-radius:4px; height:34px; box-sizing:border-box; font-size:15px; font-weight:500; letter-spacing:0; }
/* 覆盖 btn-sm 的小尺寸，与新建合同按钮等高 */
.btn.btn-export.btn-sm { padding:0 14px !important; font-size:15px !important; height:34px !important; }
.btn-export-primary { background:var(--brand); border-color:var(--brand); color:var(--panel); }@media (hover: hover) {
.btn-export-primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
}
.btn-export-secondary,
.content:is(.receipt-host, .price-host, .qtprice-host) .rc-card-body > .rc-batch-bar .rc-btn:not(.rc-btn-danger) {
background: var(--panel); border-color: var(--brand); color: var(--brand);
}
/* 【2026-09-23 用户反馈·"手机上点「取消选择」后一直保持蓝底白字，不回到蓝字白底"】 根因… */
@media (hover: hover) {
.btn-export-secondary:hover,
.content:is(.receipt-host, .price-host, .qtprice-host) .rc-card-body > .rc-batch-bar .rc-btn:not(.rc-btn-danger):hover {
background: var(--brand); border-color: var(--brand); color: var(--panel);
}
}
.btn-export-secondary svg { fill:var(--brand); }
.btn > svg, .rc-btn > svg { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.btn:has(> svg), .rc-btn:has(> svg) { display: inline-flex; align-items: center; gap: 6px; }
/* 列表页：操作列链接（统一蓝 + 删除加粗） */
.op-link { color:var(--primary); cursor:pointer; text-decoration:none; margin-right:var(--op-gap); font-size:14px; vertical-align:middle; }
th.col-withfunnel { position: relative; }
.col-funnel { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--ink-faint); cursor: pointer; border-radius: 5px; z-index: 2; transition: background .12s, color .12s; }@media (hover: hover) {
.col-funnel:hover { color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px rgba(37,99,235,.28); }
}
.col-funnel:active { background: #dbeafe; }
.col-funnel.on { color: var(--brand); background: var(--brand-soft); }@media (hover: hover) {
.col-funnel.on:hover { background: #dbeafe; }
}
.col-funnel svg { width: 17px; height: 17px; }
.col-filter-pop { position: fixed; z-index: 100000; width: 240px; padding: 10px; background: #fff; border: none; border-radius: 0; box-shadow: 0 8px 28px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08); font-family: var(--font-sans); font-size: 13px; box-sizing: border-box; }
.col-filter-pop .cf-title { font-size: 12px; color: var(--ink-faint); margin-bottom: 6px; }
.col-filter-pop input { width: 100%; height: 30px; padding: 0 10px; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); font-size: 13px; box-sizing: border-box; outline: none; font-family: inherit; }
.col-filter-pop input:focus { border-color: var(--brand); }
.col-filter-pop .cf-row { display: flex; gap: 8px; margin-top: 8px; }
.col-filter-pop .cf-btn { flex: 1; height: 28px; border: 1px solid var(--ctl-border); background: #fff; border-radius: var(--ctl-radius); cursor: pointer; font-size: 13px; color: var(--ink); font-family: inherit; }@media (hover: hover) {
.col-filter-pop .cf-btn:hover { background: var(--surface-hover); }
}
.col-filter-pop .cf-btn.pri { background: var(--brand); border-color: var(--brand); color: #fff; }@media (hover: hover) {
.col-filter-pop .cf-btn.pri:hover { opacity: .92; }
}
/* 合同列表页：操作列收窄到 140px 时收紧链接间距（仅本页生效，其它列表页不受影响） */
.content.list-page table.data .op-link { margin-right:var(--op-gap); }
.content.list-page table.data th.col-ops,
.content.list-page table.data td.col-ops { padding-left:6px; padding-right:6px; text-align:left; }
/* 子行（多产品合同第二行起）行首格子是「产品名称」td，不带 rowspan 属性。
全局 td:first-child 的 border-left 会画在需方 rowspan 格右边线旁，叠成重复双线——这里归零。 */
.content.list-page table.data td:first-child:not([rowspan]) { border-left-width: 0; }
/* 列宽自由拖拽：表格宽度 = 各列宽度之和，不再强制填满容器（table.data 的 width:100% 在此页取消）。
这样拖某条竖线时，右侧所有列保持原宽、整体平移（资源管理器模式）；
收窄 → 表格变窄右侧留白；加宽 → 超出屏宽时 .list-scroll 出横向滚动条。 */
/* 【2026-09-21 已还原·重要】用户明确要求：**合同列表这一块保持原来的样子** ✓ （原话："我要的是我合同列表原来的那一个……这一块表头不用动… */
/* 【2026-09-21 用户需求·最终版】用户原话（截图指出）： "这里不要离开，应该是铺满的才对。 */
.content.list-page table.data { width: 100%; min-width: max-content; }
/* 列宽拖拽手柄：贴在表头每列右缘（最后一列除外），默认隐形，悬停显示灰色小竖条。
th 本身是 position:sticky（定位元素），手柄 absolute 相对 th 定位。 */
.content.list-page table.data thead th .col-resizer { position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:5; }
/* 最后一列手柄不向右突出（right:-3px 会伸到表格外，铺满时多出 1px 横向滚动） */
.content.list-page table.data thead th:last-child .col-resizer { right:0; }
.content.list-page table.data thead th .col-resizer::after { content:''; position:absolute; top:25%; height:50%; right:3px; width:2px; border-radius:1px; background:transparent; }@media (hover: hover) {
.content.list-page table.data thead th .col-resizer:hover::after { background:var(--ink-faint); }
}
body.col-resizing, body.col-resizing * { cursor:col-resize !important; user-select:none !important; }
.op-link:last-child { margin-right:0; }@media (hover: hover) {
.op-link:hover { color:var(--primary-dark); }
}
.op-link.op-primary { color:var(--primary); }@media (hover: hover) {
.op-link.op-primary:hover { color:var(--primary-dark); }
}
.op-link.op-danger { color:var(--danger); font-weight:500; }@media (hover: hover) {
.op-link.op-danger:hover { color:var(--danger); }
}
.search-input, .rc-search, .price-app #q, .qtprice-app .search { width: var(--search-w); max-width: 60vw; height: var(--ctl-h); box-sizing: border-box; font-size: var(--ctl-fs); border-radius: var(--ctl-radius); padding: 0 12px; border: 1px solid var(--ctl-border); }
.search-input { min-width: var(--search-w); outline: none; background: var(--panel); }
.search-input:focus { border-color: var(--brand); }
/* form */
.field { margin-bottom: var(--space-form); }
.field label { display: block; font-size: var(--fs-label); color: var(--ink-label); margin-bottom: var(--space-label); font-weight: 500; }
.field .req { color: var(--danger); margin-left: 2px; }
/* 【2026-09-16 修正·重要】不要在本规则里加 `input:not([type])`！ */
input[type=text], input[type=number], input[type=date], .field input, select {
width: 100%; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius);
padding: 0 12px; height: var(--ctl-h); box-sizing: border-box;
font-size: var(--ctl-fs) !important;
font-family: var(--font-sans);
outline: none; background:var(--panel); color: var(--ink);
}
.dp-input::-webkit-calendar-picker-indicator { pointer-events: none; }
.dp-input { cursor: pointer; }
/* 复选框大小 / 勾选列宽度：全站唯一定义处（JS 侧用 Util.ckColWidth() 读 --ck-col） */
:root { --ck-size: 16px; --ck-col: 42px; }
@media (max-width: 1080px) { :root { --ck-size: 20px; } }
input[type="checkbox"] { width: var(--ck-size); height: var(--ck-size); }
/* 四个列表页的勾选列（合同列表 / 开票 / 强泰 / 收款）：宽度取 --ck-col、居中、左右内边距 8px，且不给拖拽手柄 */
.content.list-page table.data thead th:first-child,
.content.list-page table.data tbody td:first-child[rowspan],
.rc-table th.rc-col-sel, .rc-table td.rc-col-sel,
.inv-table-card thead th.chk, .inv-table-card tbody td.chk,
.qtprice-app .rc-table th.col-check, .qtprice-app .rc-table td.col-check {
width: var(--ck-col); text-align: center; padding-left: 8px; padding-right: 8px;
}
.content.list-page table.data thead th:first-child input[type=checkbox],
.content.list-page table.data tbody td:first-child[rowspan] input[type=checkbox],
.rc-table th.rc-col-sel input, .rc-table td.rc-col-sel input,
.inv-table-card thead th.chk input, .inv-table-card tbody td.chk input,
.qtprice-app .rc-table th.col-check input[type=checkbox], .qtprice-app .rc-table td.col-check input[type=checkbox] {
width: var(--ck-size); height: var(--ck-size); margin: 0; vertical-align: middle; cursor: pointer;
}
/* 【2026-09-16 修复·移动端】手机点 任意位置都会弹系统原生日历，
此时自绘浮层不再出现（util.js 的 openDatePicker 已在移动端 return）——
这里把日历图标的 pointer-events 还原，否则用户点那个小图标完全没反应。 */
@media (max-width: 1080px) {
.dp-input::-webkit-calendar-picker-indicator { pointer-events: auto; }
.op-link, .rc-link { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 6px; }
.cc-check { min-height: 34px; } /* 「选择」这个 label 才是勾选框最好点的地方 */
/* 【2026-09-16 移动端修复·模板设置页撑破屏幕】 模板设置页「开户与转账信息」的 4 个输入框（开户行/对公账号/公司名称/账号备注） 带**内联** min-width:300px（app.… */
.form-grid input { min-width: 0 !important; }
}
/* 自绘下拉浮层（桌面端）：原生