/* 供应链财务后台（ERP）样式
 *
 * 与零售后台同构不同皮：信息密度、操作路径一致（金蝶老用户零学习成本），
 * 但配色与圆角是自有的一套，不复制对方视觉资产。
 *
 * 注意 .kpis / .kpi 原本全站没有定义 —— 零售后台的库存总览那几张 KPI 卡
 * 一直是裸 div（能看见内容，只是挤成一列）。这里补上，ERP 与零售都能用。
 */

:root {
  --erp-bg: #F4F6F8;
  --erp-panel: #FFFFFF;
  --erp-line: #E2E6EA;
  --erp-ink: #1F2A33;
  --erp-ink2: #5B6B78;
  --erp-ink3: #8A9AA6;
  --erp-main: #2A5D8F;
  --erp-main-soft: #EAF1F8;
  --erp-ok: #2E7D54;
  --erp-warn: #A6701B;
  --erp-danger: #A6402C;
}

* { box-sizing: border-box; }
body.erp-body {
  margin: 0; background: var(--erp-bg); color: var(--erp-ink);
  font: 400 13px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.erp { display: grid; grid-template-columns: 208px minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); height: 100vh; }
.erp-top {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  padding: 0 16px; background: var(--erp-panel); border-bottom: 1px solid var(--erp-line);
}
.erp-brand { font-size: 14px; font-weight: 500; letter-spacing: .3px; }
.erp-brand small { font-weight: 400; color: var(--erp-ink3); margin-left: 6px; font-size: 11.5px; }
.erp-top .sp { flex: 1; }
.erp-mode {
  font-size: 11.5px; padding: 2px 8px; border-radius: 10px;
  background: var(--erp-main-soft); color: var(--erp-main);
}
.erp-mode.solo { background: #FBF3E2; color: var(--erp-warn); }
.erp-user { font-size: 12.5px; color: var(--erp-ink2); }

.erp-side {
  background: var(--erp-panel); border-right: 1px solid var(--erp-line);
  overflow-y: auto; padding: 8px 0 24px;
}
.erp-grp { padding: 12px 14px 4px; font-size: 11.5px; color: var(--erp-ink3); letter-spacing: .4px; }
.erp-nav-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 18px;
  font-size: 13px; color: var(--erp-ink2); cursor: pointer; border-left: 2px solid transparent;
}
.erp-nav-item:hover { background: #F7F9FB; color: var(--erp-ink); }
.erp-nav-item.on { background: var(--erp-main-soft); color: var(--erp-main); border-left-color: var(--erp-main); font-weight: 500; }
.erp-nav-item .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.erp-nav-item.todo { color: var(--erp-ink3); }
.erp-nav-item.todo .badge { font-size: 10px; padding: 0 5px; border-radius: 8px; background: #F1EFE8; color: var(--erp-ink3); }

.erp-main { overflow: auto; padding: 16px 18px 40px; min-width: 0; }

.erp-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.erp-hd h1 { font-size: 15px; font-weight: 500; margin: 0; }
.erp-hd .sub { font-size: 12px; color: var(--erp-ink3); }
.erp-hd .sp { flex: 1; }

.erp-card { background: var(--erp-panel); border: 1px solid var(--erp-line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.erp-card > h3 { font-size: 13px; font-weight: 500; margin: 0 0 10px; }

.kpis { display: grid; gap: 10px; margin-bottom: 14px; }
.kpis.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) { .kpis.c3, .kpis.c4, .kpis.c5, .kpis.c6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--erp-panel); border: 1px solid var(--erp-line); border-radius: 8px; padding: 11px 13px; min-width: 0; }
.kpi .k { font-size: 11.5px; color: var(--erp-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* `.v` 上的 text-overflow:ellipsis **只有配上 white-space:nowrap 才生效**。
 * 少了后面这句，超长金额会折成两行（"¥130422.6" / "4"），而省略号一个都不出现
 * —— 看起来像"这个数字本来就这么长"。金额栏宁可截断也不能换行，
 * 换行会把整排卡片的高度撑开，四张卡变得高矮不齐。 */
.kpi .v { font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--erp-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 副标题有两个类名并存：早期页面写 `.n`，后来的写 `.s`。
 * 只定义 `.n` 的话，`.s` 那批会退化成继承字号（14px，比标题还显眼），
 * 卡片看着像"说明文字比数字重要"。两个一起定义，改模板就不用逐个翻。 */
.kpi .n, .kpi .s { font-size: 11.5px; color: var(--erp-ink3); }

.erp-btn {
  height: 30px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--erp-line);
  background: #fff; color: var(--erp-ink); font-size: 12.5px; cursor: pointer;
}
.erp-btn:hover { border-color: #C9D3DB; }
.erp-btn.primary { background: var(--erp-main); border-color: var(--erp-main); color: #fff; }
.erp-btn.primary:hover { background: #234E79; }
.erp-btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.erp-btn:disabled { opacity: .45; cursor: not-allowed; }

.erp-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: #F1EFE8; color: var(--erp-ink2); white-space: nowrap; }
.erp-tag.ok { background: #EAF2EC; color: var(--erp-ok); }
.erp-tag.warn { background: #FBF3E2; color: var(--erp-warn); }
.erp-tag.bad { background: #F7EDEA; color: var(--erp-danger); }
.erp-tag.info { background: var(--erp-main-soft); color: var(--erp-main); }

.erp-pager { display: flex; gap: 7px; align-items: center; justify-content: flex-end; padding-top: 10px; }
.erp-toast {
  position: fixed; left: 50%; bottom: 36px; transform: translate(-50%, 10px);
  background: rgba(31, 42, 51, .94); color: #fff; font-size: 12.5px;
  padding: 8px 16px; border-radius: 6px; opacity: 0; pointer-events: none; transition: .18s;
}
.erp-toast.on { opacity: 1; transform: translate(-50%, 0); }

.erp-field { margin-bottom: 12px; }
.erp-field label { display: block; font-size: 12px; color: var(--erp-ink2); margin-bottom: 4px; }
.erp-inp {
  width: 100%; height: 32px; border: 1px solid var(--erp-line); border-radius: 6px;
  padding: 0 10px; background: #fff; font-size: 12.5px; color: var(--erp-ink);
}
.erp-inp:focus { outline: none; border-color: var(--erp-main); box-shadow: 0 0 0 3px rgba(42, 93, 143, .1); }
.erp-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.erp-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.erp-empty { padding: 34px 10px; text-align: center; color: var(--erp-ink3); font-size: 12.5px; }

.erp-login {
  position: fixed; inset: 0; background: var(--erp-bg); display: flex;
  align-items: center; justify-content: center; z-index: 200;
}
.erp-login .box { width: 320px; background: #fff; border: 1px solid var(--erp-line); border-radius: 10px; padding: 22px; }
.erp-login h1 { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.erp-login p { font-size: 12px; color: var(--erp-ink3); margin: 0 0 16px; }

/* 复用零售进销存页面时的容器：它自己会往里渲染，这里只保证不撑破布局 */
#invHost > div { min-width: 0; }
#invHost .tbl { min-width: 0; }

/* ---------- 抽屉（供应链台自己的定位） ----------
 * `xd.css` 只定义了 `.drawer` 的**子元素**样式（.pane 圆角、.hd 内边距、.ft 背景），
 * 真正让它浮起来的那三条 —— `position:fixed; inset:0; display:none` ——
 * 写在 `admin.html` 的**内联 `<style>`** 里。erp.html 没引入那段，
 * 于是 `stDrawer()` 在供应链台里建出了完整 DOM、`innerText` 也读得出内容，
 * 但它只是一个排在 body 末尾的普通块（视口外）：点「详情」看起来什么都没发生。
 * 这类缺陷最难查 —— DOM 断言、文字断言全绿，只有截图能看出来。
 * 下面这份与 admin.html 里那份同值同源，改的时候两边一起改。 */
.drawer{position:fixed;inset:0;background:rgba(42,39,36,.45);z-index:60;display:none;}
.drawer .pane{position:absolute;right:0;top:0;bottom:0;width:min(var(--detail-w,720px),94vw);
  background:#fff;display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.12);}
.drawer .hd{display:flex;align-items:center;gap:10px;}
.drawer .hd > *{flex-shrink:0;}
.drawer .hd h3{font-family:"Songti SC",serif;color:var(--main);font-size:17px;
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drawer .bd{flex:1;overflow-y:auto;}
.drawer .ft{display:flex;gap:10px;justify-content:flex-end;}

/* ---------- 键值对行（工资明细抽屉） ----------
 * 一列一个指标：左边灰标签、右边深色数字。比表格轻，比纯文字好扫。
 * 数额用等宽感对齐（font-variant-numeric），一列下去小数点能对上。 */
.erp-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:7px 10px;background:#FAF8F4;border-radius:8px;font-size:13px;min-width:0;}
.erp-kv>span{color:var(--erp-ink3);font-size:12px;white-space:nowrap;flex-shrink:0;}
.erp-kv>b{font-weight:500;color:var(--erp-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;}
.erp-kv>b.hi{color:var(--erp-warn);font-weight:600;}

/* ---------- 表单网格 ----------
 * `erp.js` 里二十多处写着 `class="erp-fgrid"`，但这个类**一直没有定义**：
 * 于是所有抽屉表单（固定资产、出纳、工资）都退化成单列竖排 —— 能填、能存、
 * 断言全绿，只是要往下滚很久。和 `.kpi .s` 是同一类问题：模板用了 CSS 里
 * 不存在的类名，浏览器不报错，只是长成另一个样子。
 * 这里的 2 列是给「标签 + 输入框」用的；`.c3` 给「标签 + 一个数字」的紧凑键值行。 */
.erp-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.erp-fgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.erp-fgrid > * { min-width: 0; }
@media (max-width: 760px) {
  .erp-fgrid, .erp-fgrid.c3 { grid-template-columns: minmax(0, 1fr); }
}