/* ============================================================================
   联拓图文 新 ERP —— Web 端样式
   ★ 令牌与骨架直接照抄 Claw/doc/PC端界面标准-2026.md（2026-10-23 冻结）
     208px 钢蓝侧栏顶天立地 + 同色 banner + 米白内容区 + 标题只在 banner 出现一次
   ========================================================================== */

:root {
  --paper: #F5F3EE;      /* 纸面米白底 */
  --paper-2: #FBFAF7;    /* 卡片白 */
  --steel: #2C4A5E;      /* 钢蓝主色 ★ 侧栏/banner/主按钮 */
  --steel-2: #3D5F77;    /* 钢蓝按下态 */
  --line: #E5E0D6;       /* 暖色细线 */
  --line-2: #D9D5CC;
  --ink: #2B2A27;        /* 正文墨色 */
  --ink-2: #6B6862;      /* 次要文字 */
  --ink-3: #9A968E;      /* 弱化文字 */
  --amber: #B27A2B;      /* 琥珀 · 待办/提醒 */
  --amber-bg: #FBF1DC;
  --moss: #4A6B4E;       /* 苔绿 · 正常/完成 */
  --moss-bg: #E6EFE7;
  --brick: #8B3A2E;      /* 砖红 · 异常/警示 */
  --brick-bg: #FBECEA;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(44, 74, 94, .06);
  --muted: var(--ink-2);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* 金额 / 单号 / 编号一律等宽数字 */
.num, .money, .code { font-variant-numeric: tabular-nums; }

/* ══ 外壳 ══ */
.shell { display: flex; min-height: 100vh; background: var(--paper); }
.wb { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ══ 侧栏（R1: x=0 y=0 宽 208 钢蓝）══ */
.pc-side {
  flex: 0 0 208px; background: var(--steel); color: #fff;
  padding: 14px 0; display: flex; flex-direction: column;
}
.pc-side .brand {
  font-size: 15px; font-weight: 700; padding: 0 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 10px;
}
.pc-side .nav {
  padding: 9px 16px; font-size: 13.5px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.82);
}
.pc-side .nav:hover { background: rgba(255,255,255,.08); }
.pc-side .nav.on { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.pc-side .nav .nv { flex: 1; }
.pc-side .pc-foot {
  margin-top: auto; padding: 12px 16px 0; font-size: 12px;
  color: rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.14);
}

/* ══ banner（R2: x=208 y=0 与侧栏同色无缝）══ */
.hdr {
  background: var(--steel); color: #fff; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.hdr h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: .5px; }
.hdr .sub { font-size: 12px; opacity: .75; }
.right-slot { text-align: right; font-size: 12px; opacity: .9; }

/* ══ 内容区 ══ */
.pc-main {
  flex: 1; padding: 20px 24px 48px;
  max-width: 1180px; width: 100%;
}

.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; margin-bottom: 14px;
}
.card-t {
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  margin: 0 0 10px; letter-spacing: .3px;
}

/* ══ 表 ══ */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  text-align: left; white-space: nowrap;
}
th { color: var(--ink-2); font-weight: 600; background: #F7F5F0; }
td.r, th.r { text-align: right; }
tbody tr:hover { background: #FAF8F4; }

/* ══ 表单 ══ */
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.fld { display: flex; flex-direction: column; gap: 3px; }
.fld label { font-size: 12px; color: var(--ink-2); }
input, select {
  padding: 6px 9px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-size: 13px; font-family: inherit;
  min-width: 120px;
}
input:focus, select:focus { outline: 2px solid rgba(44,74,94,.25); border-color: var(--steel); }
input.num { text-align: right; font-variant-numeric: tabular-nums; }

button {
  padding: 7px 14px; border: 1px solid var(--steel); border-radius: var(--radius);
  background: var(--steel); color: #fff; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
button:hover { background: var(--steel-2); }
button:active { background: #24404f; }
button.ghost { background: transparent; color: var(--steel); }
button.ghost:hover { background: rgba(44,74,94,.08); }
button.warn { background: var(--amber); border-color: var(--amber); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.sm { padding: 4px 8px; font-size: 12px; }

/* ══ 状态标签（琥珀=待办 / 苔绿=正常 / 砖红=异常）══ */
.tag {
  display: inline-block; padding: 1px 7px; border-radius: 9px;
  font-size: 11.5px; line-height: 1.5;
}
.tag.todo { background: var(--amber-bg); color: var(--amber); }
.tag.ok   { background: var(--moss-bg);  color: var(--moss); }
.tag.bad  { background: var(--brick-bg); color: var(--brick); }
.tag.gray { background: #EFEDE8; color: var(--ink-2); }

/* ══ 提示 ══ */
.msg { padding: 8px 12px; border-radius: var(--radius); font-size: 13px; margin-bottom: 10px; }
.msg.err { background: var(--brick-bg); color: var(--brick); border: 1px solid rgba(139,58,46,.2); }
.msg.ok  { background: var(--moss-bg);  color: var(--moss);  border: 1px solid rgba(74,107,78,.2); }
.hint { font-size: 12px; color: var(--ink-2); }
.empty { padding: 24px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* 金额强调 */
.amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.amt.neg { color: var(--brick); }
.amt.pos { color: var(--moss); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

/* 隐藏 */
.hide { display: none !important; }