/* ===== 基础 ===== */
:root{
  --bg:#f4f6f9; --side:#1e2a3a; --line:#e2e6ec; --t1:#1e2a3a; --t2:#6b7684;
  --pri:#2563eb; --ok:#0f9d58; --warn:#d97706; --bad:#c0392b;
  --side-w:clamp(180px,15vw,232px);
  --gap:clamp(10px,1.2vw,18px);
  --pad:clamp(14px,1.6vw,28px);
  --radius:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.55 "Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  color:var(--t1);background:var(--bg);
  -webkit-text-size-adjust:100%;
}
a{color:var(--pri);text-decoration:none}
a:hover{text-decoration:underline}
img,table{max-width:100%}

/* ===== 骨架：宽屏左右，窄屏上下 ===== */
.layout{
  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);
  min-height:100vh;
}
.side{
  background:var(--side);color:#c7d0dc;
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{padding:18px 16px;font-size:15px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.side nav{flex:1;padding:8px 0;overflow-y:auto;min-height:0}
.side nav a{display:block;padding:8px 16px;color:#c7d0dc;font-size:13.5px;white-space:nowrap}
.side nav a:hover{background:rgba(255,255,255,.06);text-decoration:none}
.side nav a.on{background:rgba(37,99,235,.28);color:#fff;border-left:3px solid #4d8cff;padding-left:13px}
.side .group{
  padding:14px 16px 6px;
  font-size:11.5px;color:#7b8798;letter-spacing:.06em;
  display:flex;align-items:center;gap:6px;
}
.side .group::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08)}
.who{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.who small{color:#8e9aab}

/* 主区：不设上限宽度，用可用空间；内容用 padding 呼吸 */
.main{
  min-width:0;
  padding:var(--pad);
  display:flex;flex-direction:column;
  gap:var(--gap);
}

h1{font-size:clamp(17px,1.5vw,21px);margin:0}
/* 主区已是 flex + gap，标题不再自带外边距，避免间距叠成空洞 */
h2{font-size:clamp(14px,1.1vw,15.5px);margin:0;color:#2b3a4d}
h3{font-size:14px;margin:0}
.hint{color:var(--t2);font-size:13px;margin:0;line-height:1.6}

/* ===== 页头 ===== */
.head{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
}
.head h1{margin:0}
.head .spacer{flex:1}
.head .btn{margin-left:0}

/* 面包屑：标明当前在哪个域 */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--t2)}
.crumb b{color:var(--t1);font-weight:600}
.crumb .sep{color:#c2cad6}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--t1);font-size:13px;cursor:pointer;line-height:1.2;
  transition:background .15s,border-color .15s;
}
.btn:hover{background:#f0f2f5;text-decoration:none}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.primary:hover{background:#1d4ed8}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12.5px}

/* ===== 搜索 / 筛选条 ===== */
.search,.filters{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;
}
.search input,.search select,.filters input,.filters select{
  padding:7px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;
  font-family:inherit;flex:1 1 200px;max-width:340px;min-width:0;
}
.search .hint,.filters .hint{margin-right:auto}

/* ===== 表格：外层横向滚动，宽表格不撑破页面 ===== */
/* 长表格：自身成为滚动容器，表头才能吸顶。
   只给 overflow-x 的话，纵向滚动发生在页面上，sticky 表头会跟着整页滚走。 */
.tablewrap{
  width:100%;overflow:auto;background:#fff;
  /* 顶部多了一条「返回工作台 + 当前账号」的横条，表头吸顶的可视高度相应让出这一段 */
  max-height:calc(100vh - 248px);
  border:1px solid var(--line);border-radius:var(--radius);
  overscroll-behavior:contain;
}
/* 表头吸顶：滚到第 200 行也知道每列是什么 */
.grid thead th{box-shadow:inset 0 -1px 0 var(--line)}
/* 合计行吸底，翻到底不用回滚 */
.grid tfoot th{position:sticky;bottom:0;z-index:2;background:#f7f9fc;box-shadow:inset 0 1px 0 var(--line)}
.grid{width:100%;border-collapse:collapse;background:#fff}
.grid th{
  background:#eef1f5;text-align:left;font-weight:600;font-size:12.5px;color:#4a5768;
  padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
.grid td{padding:9px 12px;border-bottom:1px solid #f0f2f5;font-size:13px;vertical-align:middle}
.grid tbody tr:last-child td{border-bottom:0}
.grid tbody tr:hover{background:#fafcff}
/* 关联记录里的年份分组标题行：一眼看出这一年有多少条、多少钱 */
.grid tbody tr.grp td{background:#f4f6f9;font-size:12.5px;color:var(--t2);
  border-top:1px solid var(--line);padding:8px 12px}
.grid tbody tr.grp td b{color:var(--t1);font-size:13px;margin-right:10px}
.grid tbody tr.grp td .sub{margin-right:12px}
.grid tbody tr.grp:hover{background:#f4f6f9}
.grid .empty{text-align:center;color:var(--t2);padding:30px}
.grid tfoot th{background:#f7f9fc;border-top:1px solid var(--line);padding:9px 12px;font-size:12.5px}
.mono{font-family:Consolas,monospace;font-size:12.5px;color:#3b4a5c}
.nowrap{white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== 卡片：自动铺满，不写死列数 ===== */
.cards{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.card span{display:block;color:var(--t2);font-size:12.5px}
.card b{display:block;font-size:clamp(18px,1.6vw,23px);margin-top:6px;font-variant-numeric:tabular-nums}
.card b.sm{font-size:15px;font-weight:600;margin-top:8px;line-height:1.35;word-break:break-all}
.card b.ok{color:var(--ok)}
.card b.bad{color:var(--bad)}

/* ===== 表单：字段自动换行铺满整行，不锁列数也不锁像素 ===== */
.form{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(14px,1.6vw,24px);
  display:flex;flex-direction:column;gap:var(--gap);
}
.fields{
  display:grid;gap:var(--gap) clamp(12px,1.4vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  align-items:start;
}
.fields > .fld{display:flex;flex-direction:column;min-width:0}
.fields > .fld.wide{grid-column:1/-1}
.fld > span.lab{font-size:13px;color:#42505f;margin-bottom:5px}
.fld i{color:#d9534f;font-style:normal;margin-left:2px}
.form input,.form select,.form textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:13.5px;font-family:inherit;color:inherit;background:#fff;min-width:0;
}
.form textarea{resize:vertical;min-height:calc(1.55em * 3 + 18px)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid #c7dbff;border-color:#8fb4f5}
.form .actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding-top:10px;border-top:1px solid #f0f2f5}
.fhint{color:#8a94a3;font-size:12px;margin-top:5px;line-height:1.5}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:8px 0}
.chk input{width:auto;margin:0}

/* 表单分节标题 */
.sect{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:4px 0 -4px;color:#2b3a4d;font-size:13px;font-weight:600}
.sect::after{content:"";flex:1;height:1px;background:#eef1f5}

/* ===== 行内小表单（加明细行、加节点、登记收款） ===== */
.inline-form{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;
}
.inline-form input,.inline-form select{
  padding:7px 10px;border:1px solid var(--line);border-radius:7px;
  font-size:13px;font-family:inherit;min-width:0;
  flex:1 1 130px;max-width:100%;
}
.inline-form input[name=item_name],
.inline-form input[name=node_name],
.inline-form input[name=name]{flex:2 1 220px}

/* ===== 提示条 / 标签 ===== */
.flash{background:#e6f4ea;border:1px solid #b7e1c3;color:#0f6b3a;padding:9px 14px;border-radius:8px}
.flash.err{background:#fdecea;border-color:#f3b8b3;color:#a4291f}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;background:#eef1f5;color:#5b6675;font-size:12px;white-space:nowrap}
.tag.ok{background:#e6f4ea;color:var(--ok)}
.tag.bad{background:#fdecec;color:var(--bad)}
.tag.warn{background:#fdf3e3;color:var(--warn)}
.linkbtn{background:none;border:0;color:var(--bad);font-size:13px;cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}

.pager{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;font-size:13px;color:var(--t2)}

/* ===== 关联信息块：把跨域关联显式摆出来 ===== */
.rel{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
}
.rel .item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;min-width:0}
.rel .item span{display:block;color:var(--t2);font-size:12px;margin-bottom:4px}
.rel .item b{font-weight:600;font-size:13.5px;word-break:break-all}
.rel .item small{display:block;color:#8a94a3;font-size:12px;margin-top:3px}
/* 关联记录里的两层小标题（按年份汇总 / 按单据类型汇总） */
.panel > h3.sub{font-size:13px;font-weight:500;color:var(--t2);margin:14px 0 8px}
.panel > h3.sub:first-of-type{margin-top:4px}

/* ===== 窄屏：侧栏变顶部横条，表单单列 ===== */
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);min-height:auto}
  .side{
    position:static;height:auto;width:100%;
    flex-direction:row;flex-wrap:wrap;align-items:center;
  }
  .brand{border:0;padding:12px 14px;flex:0 0 auto}
  .side nav{display:flex;flex-wrap:wrap;padding:0;overflow-x:auto;flex:1 1 100%}
  .side nav a{padding:9px 12px;border-left:0!important}
  .side nav a.on{background:rgba(37,99,235,.42)}
  .side .group{display:none}
  .who{display:none}
  .main{padding:14px}
  .grid th,.grid td{padding:8px 9px}
}
@media (max-width:560px){
  .head{gap:8px}
  .head .btn{padding:7px 12px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
  .form .actions{justify-content:stretch}
  .form .actions .btn{flex:1}
}
@media print{
  .side,.head .btn,.inline-form,.form .actions{display:none}
  .main{padding:0}
}
.linkbtn.pri{color:var(--pri)}
details summary::-webkit-details-marker{display:none}
details summary{list-style:none}

/* ===== 口径提示盒：把会误导判断的缺口摆到台面上，不藏 ===== */
.warnbox{
  border:1px solid #f0cf9a;background:#fff9ee;color:#7a5316;
  border-radius:var(--radius);padding:clamp(10px,1.2vw,16px);
  display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.65;
}
.warnbox b{color:#8a5a10}
.warnbox ul{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:4px}

/* ===== 可搜索下拉（select.js）=====
   原生 select 留在 DOM 里负责提交，只在视觉上收成 1px，输入框和面板才是人看到的。 */
.ss{position:relative;display:block;width:100%;min-width:0}
/* 每条都带 !important：.form select / .search select 那些 width:100% 的规则
   优先级比单个类高，不加就压不住，原生 select 会以真实尺寸叠在输入框上面抢点击。 */
.ss-native{
  position:absolute!important;left:0!important;top:0!important;
  width:1px!important;height:1px!important;min-width:0!important;max-width:1px!important;
  margin:0!important;padding:0!important;border:0!important;
  opacity:0!important;pointer-events:none!important;overflow:hidden!important;
  flex:0 0 0!important;
}
.ss-input{
  width:100%;min-width:0;
  padding:8px 30px 8px 10px;font:inherit;color:var(--t1);
  background:#fff;border:1px solid #cfd6df;border-radius:8px;
  outline:none;
}
.ss-input::placeholder{color:#9aa5b1}
.ss.has-val .ss-input{font-weight:500}
.ss.open .ss-input,.ss-input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.ss.bad .ss-input{border-color:var(--bad);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
/* 右侧小箭头，至少让人看出这是个下拉 */
.ss::after{
  content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;
  border-right:1.6px solid #97a3b2;border-bottom:1.6px solid #97a3b2;
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.ss.open::after{transform:translateY(-30%) rotate(-135deg)}

.ss-panel{
  position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
  max-height:min(48vh,340px);overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 28px rgba(20,33,50,.16);
  padding:4px 0;
}
.ss-head{
  padding:5px 10px 6px;font-size:12px;color:var(--t2);
  border-bottom:1px solid #f0f2f5;position:sticky;top:-4px;background:#fff;z-index:1;
}
.ss-group{
  position:sticky;top:0;z-index:2;
  padding:6px 10px;font-size:11.5px;font-weight:600;color:#5b6b7f;
  background:#f2f5f9;border-top:1px solid #eef1f5;
}
.ss-group:first-child{border-top:0}
.ss-item{
  display:flex;align-items:baseline;gap:8px;
  padding:7px 10px;font-size:13.5px;cursor:pointer;line-height:1.45;
}
.ss-item .ss-t{flex:1;min-width:0;word-break:break-all}
.ss-item .ss-c{color:#95a1b0;font-size:11.5px;white-space:nowrap;flex:0 0 auto;font-family:ui-monospace,Consolas,monospace}
.ss-item.on{background:#eef4ff}
.ss-item.sel{font-weight:600}
.ss-item.sel .ss-t::after{content:" · 已选";font-weight:400;color:var(--pri);font-size:12px}
.ss-item mark{background:#fff2a8;color:inherit;padding:0 1px;border-radius:2px}
.ss-empty{padding:14px 10px;text-align:center;color:var(--t2);font-size:13px}

/* 筛选条里的下拉别撑满整行，但也别窄到看不见内容 */
.search .ss{width:auto;flex:0 1 250px;min-width:170px}
.inline-form .ss{width:auto;flex:0 1 200px;min-width:150px}

/* 输入框尺寸跟随所在区域，别比旁边的输入框高一头 */
.search .ss-input,.filters .ss-input{padding:7px 26px 7px 10px;font-size:13px;flex:none;max-width:none}
.form .ss-input{padding:8px 30px 8px 11px;font-size:13.5px}
.inline-form .ss-input{padding:7px 26px 7px 10px;font-size:13px;flex:none;max-width:none}
/* 这些区域里的原生 select 已收成 1px，别再让它参与 flex 计算 */
.search .ss-native,.filters .ss-native,.inline-form .ss-native,.form .ss-native{
  flex:0 0 0;max-width:0;min-width:0;
}

/* ===== 详情页 ===== */
.headmain{display:flex;flex-direction:column;gap:4px;min-width:0}
.headmain h1{word-break:break-word}
.head .sub{font-size:12.5px;color:var(--t2)}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(12px,1.4vw,20px);display:flex;flex-direction:column;gap:10px;
}
.panel h2{font-size:13px;color:#4a5768;font-weight:600}
/* 详情字段：宽屏多列，窄屏单列，不写死列数 */
.kv{display:grid;gap:10px 18px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.kv-item{display:flex;flex-direction:column;gap:3px;min-width:0}
.kv-item.wide{grid-column:1/-1}
.kv .k{font-size:12px;color:var(--t2)}
.kv .v{font-size:13.5px;color:var(--t1);word-break:break-word;line-height:1.55}
.kv .v .para{white-space:pre-wrap;margin:0;background:#fafbfd;border:1px solid #eef1f5;border-radius:8px;padding:8px 10px}
.kv .dash{color:#c3cad3}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
/* 列表里第一列做成整格可点，看着像链接但不喧宾夺主 */
.grid td a.rowlink{color:var(--t1);font-weight:600;display:inline-block}
.grid td a.rowlink:hover{color:var(--pri);text-decoration:underline}
.actions-cell a{margin-right:10px}
.actions-cell a:last-child{margin-right:0}
/* 操作列不许被挤成竖排 */
.grid td.actions-cell,.grid th:last-child{white-space:nowrap}
.grid td.actions-cell a{white-space:nowrap}

/* ===== 应收台账 ===== */
.card span.sub{font-size:11.5px;margin-top:4px;color:#8d97a5}
/* 合同/客户两行合一个格子：名称一行，编号+客户一行小字 */
.grid td.cellmain{min-width:178px}
.grid td .sub2{display:block;font-size:11.5px;color:var(--t2);line-height:1.45;margin-top:1px}
/* 收款进度条：宽度跟随单元格，不定死像素 */
.pbar{display:inline-block;vertical-align:middle;width:clamp(40px,5vw,78px);height:6px;
      background:#eceff3;border-radius:3px;overflow:hidden;margin-right:6px}
.pbar i{display:block;height:100%;background:var(--ok);border-radius:3px}
.pct{font-size:11.5px;color:var(--t2);font-variant-numeric:tabular-nums}

/* ===== 上传识别 ===== */
.scanbox{
  background:#fafbfd;border:1px dashed #cfd8e3;border-radius:var(--radius);
  padding:clamp(10px,1.2vw,16px);display:flex;flex-direction:column;gap:10px;margin-bottom:14px;
}
.scan-head{display:flex;flex-direction:column;gap:3px}
.scan-head b{font-size:13.5px;color:#31405a}
.scanhint{font-size:12px;color:var(--t2);line-height:1.55}
.scan-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.scan-pick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.scan-pick .btn{cursor:pointer}
.scanres{font-size:12.5px;line-height:1.6;display:flex;flex-direction:column;gap:6px}
.scan-ing{color:var(--t2)}
.scan-ok{background:#e9f6ee;border:1px solid #cfe9d8;border-radius:8px;padding:8px 10px;color:#1d6b3a}
.scan-miss{background:#fdf3e3;border:1px solid #f0dcbb;border-radius:8px;padding:8px 10px;color:#8a5a10}
.scan-how{color:var(--t2);font-size:12px}
.scan-notes{margin:0;padding-left:1.2em;color:#8a5a10}
.scan-text summary{cursor:pointer;color:var(--pri);font-size:12px}
.scan-text pre{
  margin:6px 0 0;max-height:220px;overflow:auto;white-space:pre-wrap;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font-size:11.5px;line-height:1.5;color:#48556b;
}
/* 识别填入的框闪一下，让人知道哪几格是刚填的 */
@keyframes scanflash{0%{background:#fff6d8;border-color:#e3c15c}100%{background:transparent}}
.form .scan-filled,.form select.scan-filled{animation:scanflash 2.2s ease-out}
.linkbtn.danger{color:var(--bad)}
.attach-wrap{max-height:none}

/* ===== 全局顶栏：返回工作台 + 当前账号 =====
   每一页都在同一个位置出现，翻到再深一层也知道怎么回去、现在是谁在录。 */
.topbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding-bottom:2px;
}
.topbar .spacer{flex:1}
.topbar .homebtn{font-size:12.5px;padding:6px 12px}
.whoami{display:flex;align-items:center;gap:6px;margin:0}
.whoami-lab{font-size:12px;color:var(--t2);white-space:nowrap}
.whoami select{
  padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;
  font-family:inherit;font-size:12.5px;color:var(--t1);max-width:230px;min-width:0;
}
.whoami select:focus{outline:2px solid #c7dbff;border-color:#8fb4f5}

/* ===== 整行可点：任意列点一下就进详情 =====
   表格行自己会跳，操作列的链接和按钮照旧优先（脚本会让它们不被行截走）。 */
.grid tbody tr[data-href]{cursor:pointer}
.grid tbody tr[data-href]:hover{background:#f2f7ff}
.grid tbody tr[data-href] td{position:relative}
/* 可点的格子给个浅色底，让人看得出这一行是能进去的 */
.grid tbody tr[data-href] td a.rowlink{color:var(--pri)}

/* ===== 进项 / 销项录入页的方向条 =====
   两个页面的字段本来就该不一样，进去第一眼就要知道自己站在哪一头。 */
.dirbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 14px;font-size:13px;line-height:1.6;
}
.dirbar b{font-size:13.5px}
.dirbar .dirtip{opacity:.9}
.dirbar.in{background:#eef5ff;border-color:#c5dcfb;color:#1d4f9a}
.dirbar.out{background:#fff4ec;border-color:#f3d2bd;color:#96471c}

/* ===== 数据来源（留痕）：谁录的、谁改的、改过几次 ===== */
.audit .kv-item .v{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.audit .who{font-weight:600}
.audit .at{color:var(--t2);font-size:12.5px}
.audit .grid td{font-size:12.5px;padding:7px 10px}
.audit .note{color:#4a5768;word-break:break-word}
.audit .act{white-space:nowrap;font-size:12px;color:var(--t2)}

/* ---- 分摊编辑块：一行一个目标，金额全手填，脚本只算差额 ---- */
.splitbox{margin-top:4px}
.splitbox h2 .sub{font-weight:400;color:var(--t2);font-size:13px;margin-left:6px}
/* 分摊表不能自己滚动：一旦 overflow:auto，「分给谁」的下拉清单会被容器切掉，
   800 多个选项只能看见上面几十个。这里放开，让面板盖在页面上。 */
.splitbox .tablewrap{max-height:none;overflow:visible}
.split-grid td{padding:11px 10px;vertical-align:middle}
.split-grid tbody tr + tr td{border-top:1px solid #f4f6f9}
.split-grid input[type=number],
.split-grid input[type=text]{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;font:inherit;background:#fff}
.split-grid input[type=number]{text-align:right}
.split-grid .ss{min-width:0}
.split-grid input[name=sp_seq]{text-align:center;-moz-appearance:textfield;appearance:textfield;padding:9px 4px}
.split-grid input[name=sp_seq]::-webkit-outer-spin-button,
.split-grid input[name=sp_seq]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.split-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}
.split-sum{font-size:13px;color:var(--t2)}
.split-sum b{font-variant-numeric:tabular-nums;color:var(--t1)}
.split-sum b.ok{color:var(--ok)}
.split-sum b.bad{color:var(--bad)}

/* ===== 通用筛选栏 =====
   一屏之内要同时看到：当前筛的是什么（chips）、筛出多少（条数/合计）、还能怎么细化（更多筛选）。
   宽度全部用 flex + wrap，不写死像素，窄屏自动折行。 */
.fbar{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 12px}
.fbar-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* hidden 属性会被上面的 display:flex 盖掉，得显式写一条 */
.fbar-row[hidden]{display:none}
.fbar-q{flex:1 1 210px;min-width:150px;padding:7px 11px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:13px;background:#fff}
.fbar-q:focus{outline:2px solid rgba(37,99,235,.18);border-color:var(--pri)}
.fbar-right{margin-left:auto;display:inline-flex;gap:6px;align-items:center;flex-wrap:nowrap}
.fbar-sel{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;background:#fff;color:var(--t1)}

.fld-inline{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:8px;padding:3px 8px;background:#fbfcfe;max-width:100%}
.fld-inline .lb{color:var(--t2);font-size:12.5px;white-space:nowrap}
.fld-inline i{color:var(--t2);font-style:normal;font-size:12px}
.fld-inline input,.fld-inline select{border:0;background:transparent;font:inherit;font-size:13px;
  padding:3px 2px;max-width:150px;color:var(--t1)}
.fld-inline input:focus,.fld-inline select:focus{outline:none}
.fld-date input[type=date]{max-width:140px}
.fld-money input{max-width:104px;text-align:right;font-variant-numeric:tabular-nums}
.presets{display:inline-flex;gap:3px;flex-wrap:wrap;margin-left:2px}
.pz{font-size:11.5px;padding:2px 7px;border-radius:999px;color:#4a5768;background:#eef2f8;white-space:nowrap}
.pz:hover{background:#dde7f7;text-decoration:none}
.pz.on{background:var(--pri);color:#fff}

/* 多选：收起时只显示「已选 N」，展开是一张勾选清单 */
.msel{position:relative}
.msel>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fbfcfe;font-size:13px}
.msel>summary::-webkit-details-marker{display:none}
.msel>summary::after{content:"▾";font-size:10px;color:var(--t2)}
.msel.on>summary{border-color:var(--pri);background:#f2f7ff}
.msel>summary .lb{color:var(--t2);font-size:12.5px}
.msel>summary b{color:var(--pri);font-weight:600}
.msel-body{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:190px;max-height:280px;
  overflow:auto;background:#fff;border:1px solid var(--line);border-radius:9px;
  box-shadow:0 8px 24px rgba(20,35,60,.12);padding:6px}
.msel-item{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:6px;font-size:13px;cursor:pointer}
.msel-item:hover{background:#f4f7fb}
.msel-foot{position:sticky;bottom:-6px;background:#fff;padding:6px 4px 2px;border-top:1px solid var(--line);text-align:right}

.fbar-foot{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  border-top:1px dashed var(--line);padding-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;margin-right:auto}
.chip{display:inline-flex;align-items:center;gap:6px;background:#eef4ff;color:#1d4ed8;
  border-radius:999px;padding:2px 4px 2px 9px;font-size:12.5px;max-width:100%}
.chip-lab{color:#64748b;font-size:11.5px}
.chip-x{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:50%;background:rgba(29,78,216,.12);color:#1d4ed8;font-size:12px;line-height:1}
.chip-x:hover{background:#1d4ed8;color:#fff;text-decoration:none}
.chip-none{color:var(--t2);font-size:12.5px}
.chip-clear{font-size:12.5px;color:var(--bad);margin-left:4px}
.fbar-stat{color:var(--t2);font-size:12.5px;white-space:nowrap}
.fbar-stat b{color:var(--t1);font-variant-numeric:tabular-nums}
.fbar-stat .sep{margin:0 5px;color:#c3ccd9}

.pager{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding-top:2px}
.pg{padding:3px 9px;border:1px solid var(--line);border-radius:6px;font-size:12.5px;background:#fff;color:var(--t1)}
.pg:hover{background:#f2f6fc;text-decoration:none}
.pg.on{background:var(--pri);border-color:var(--pri);color:#fff}
.pg-info{color:var(--t2);font-size:12px;margin-left:6px}

/* 排序/每页条数这类小控件在窄屏不要挤成一列 */
@media (max-width:640px){
  .fbar-right{margin-left:0;width:100%}
  .fbar-right .fbar-sel{flex:1 1 46%}
  .fbar-stat{width:100%}
}

/* ===== 登录态：当前账号、退出 ===== */
.whoami-name{font-size:13px;color:var(--t1);white-space:nowrap}
.whoami-role{
  font-size:11.5px;color:#5b6b7f;background:#eef2f8;border:1px solid #e2e8f2;
  border-radius:20px;padding:2px 8px;white-space:nowrap;
}
.whoami .btn{padding:4px 9px}
/* 只读角色：输入框看着还是可编辑，但存不了。给个整体提示色，别让人白填一遍 */
body.readonly .btn.primary{opacity:.55}

/* 改密页 */
.pwd .fld{margin:0 0 14px}
.pwd .fld label{display:block;font-size:12.5px;color:var(--t2);margin-bottom:6px}
.pwd .fld input{
  width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:14px;
}
.pwd .fld input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* 只读模块：整页收起会写数据的按钮（后端仍然拦，这只是不让人白点）
   .keepbtn 是「改密码 / 退出」，跟权限无关，任何时候都得在；
   .homebtn 是「返回工作台」，只读角色更需要它。 */
body.readonly .main .btn:not(.keepbtn):not(.homebtn){display:none}
body.readonly .main a[href$="/edit"]{display:none}

/* 应急模式/醒目的坏消息条 */
.alert-bad{
  background:#fdecea;color:#8e1f16;border:1px solid #f3c1bb;border-radius:8px;
  padding:10px 13px;font-size:13px;line-height:1.6;font-weight:500;
}