/* 五金凿子 ERP —— 全站公共样式（唯一维护点）
   各页只引本文件；页面自己的布局样式用页名前缀（.cust- / .prod-），不要再复制一份 */

  * { box-sizing: border-box }
  :root {
    --bg: #0f1115; --panel: #12141a; --bar: #16181d; --line: #262a31;
    --line2: #1f232a; --txt: #e6e8eb; --mut: #8b919b; --dim: #6b7280;
    --accent: #2f6fd0; --accent2: #cfe3ff;
    /* 导航配色对齐子页色板 */
    --wjnav-fg: #e6e8eb; --wjnav-mut: #8b919b; --wjnav-dim: #6b7280;
    --wjnav-line: #262a31; --wjnav-hover: #1c2027; --wjnav-pop: #171a20;
    --wjnav-sel: #1b2a3f; --wjnav-sel-fg: #cfe3ff;
  }
  html, body { margin: 0; padding: 0 }
  body {
    background: var(--bg); color: var(--txt); height: 100vh; overflow: hidden;
    font-family: ui-sans-serif, system-ui, "Microsoft YaHei", sans-serif; font-size: 13px;
  }
  .bar { padding: 12px 20px 0; background: var(--bar); border-bottom: 1px solid var(--line) }
  .bar .status { font-size: 12px; color: var(--dim) }
  .bar .status b { color: var(--accent2); font-weight: 500 }
  .bar .status.err b { color: #ff8080 }

  .btn {
    background: var(--accent); color: #fff; border: 0; border-radius: 8px;
    padding: 8px 18px; font: inherit; font-size: 13px; cursor: pointer;
  }
  .btn:hover { background: #3a7de0 }
  .btn.ghost { background: transparent; color: var(--mut); border: 1px solid #2c313a; padding: 7px 14px; font-size: 12px }
  .btn.ghost:hover { background: #1c2027; color: var(--txt) }
  .btn.tiny { padding: 4px 10px; font-size: 11px; border-radius: 6px }
  .btn.danger { background: transparent; color: #c96a6a; border: 1px solid #3a2a2a }
  .btn.danger:hover { background: #2a1a1a; color: #ff8080 }

  .tabs {
    display: flex; gap: 2px; padding: 0 20px; background: var(--bar);
    border-bottom: 1px solid var(--line);
  }
  .tabs button {
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    color: var(--mut); font: inherit; font-size: 13px; padding: 11px 18px; cursor: pointer;
  }
  .tabs button:hover { color: var(--txt) }
  .tabs button.on { color: var(--accent2); border-bottom-color: var(--accent) }
  .tabs button b { font-weight: 500; color: var(--dim); margin-left: 6px }

  .tools {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-bottom: 1px solid var(--line2);
  }
  .tools input[type=text] { width: 260px; margin: 0 }
  .tools .spacer { flex: 1 }
  .tools .hint { font-size: 12px; color: var(--dim) }

  /* 筛选 */
  .fwrap { position: relative }
  .fbtn.on { background: #1b2a3f; border-color: #2b4569; color: var(--accent2) }
  .fbtn .fbadge {
    display: inline-block; min-width: 15px; height: 15px; line-height: 15px;
    margin-left: 5px; padding: 0 4px; border-radius: 8px; background: var(--accent);
    color: #fff; font-size: 10px; text-align: center;
  }
  .fpanel {
    position: absolute; top: 36px; left: 0; z-index: 60; width: 372px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.55); padding: 12px 14px 10px;
    display: none;
  }
  .fpanel.on { display: block }
  .frow { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px }
  .frow > label {
    flex: none; width: 34px; font-size: 12px; color: var(--mut); padding-top: 4px;
  }
  .fchips { display: flex; flex-wrap: wrap; gap: 6px }
  .fchip {
    padding: 3px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
    border: 1px solid #2c313a; color: var(--mut); background: #0b0d10;
    user-select: none; white-space: nowrap;
  }
  .fchip:hover { border-color: #3b4453; color: var(--txt) }
  .fchip.on { background: #1b2a3f; border-color: #2b4569; color: var(--accent2) }
  .fchip .n { color: var(--dim); font-size: 11px; margin-left: 3px }
  .ffoot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--line2); margin-top: 4px; padding-top: 9px;
  }
  .ffoot .fcnt { font-size: 12px; color: var(--dim) }

  input[type=text], input[type=number], select, textarea {
    background: #0b0d10; color: var(--txt); border: 1px solid #2c313a;
    border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; width: 100%;
  }
  input:focus, select:focus, textarea:focus { outline: none; border-color: #3f6fa8 }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
  input[type=number] { appearance: textfield; -moz-appearance: textfield }

  .scroll { height: calc(100vh - 152px); overflow: auto; padding: 0 20px 40px }
  table { width: 100%; border-collapse: collapse; font-size: 13px }
  thead th {
    position: sticky; top: 0; z-index: 2; background: #14171c;
    text-align: left; font-weight: 500; color: var(--mut); font-size: 12px;
    padding: 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  tbody td { padding: 9px 10px; border-bottom: 1px solid #191d23; vertical-align: middle }
  tbody tr { cursor: pointer }
  tbody tr:hover { background: #15181e }
  tbody tr.off td { color: #5c636e }
  .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px }
  .spec-cell { width: 132px; max-width: 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .name-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px }
  .num { text-align: right; font-variant-numeric: tabular-nums }
  .tag {
    display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 4px;
    background: #1c2027; color: var(--dim); border: 1px solid #2c313a;
  }
  .empty { padding: 60px 0; text-align: center; color: var(--dim); font-size: 13px }
  .ops { white-space: nowrap; text-align: right }

  .mask {
    position: absolute; inset: 0; background: rgba(6,8,11,.72);
    display: none; align-items: center; justify-content: center; z-index: 50; padding: 24px;
  }
  .mask.on { display: flex }
  .dlg {
    width: 620px; max-width: 100%; max-height: 100%; overflow: auto;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  }
  .dlg h2 {
    margin: 0; padding: 16px 22px; font-size: 14px; font-weight: 500;
    border-bottom: 1px solid var(--line2);
  }
  .dlg .body { padding: 18px 22px 4px }
  .dlg .foot {
    display: flex; gap: 10px; justify-content: flex-end; align-items: center;
    padding: 14px 22px 18px; border-top: 1px solid var(--line2); margin-top: 14px;
  }
  .dlg .foot .msg { margin-right: auto; font-size: 12px; color: #ff8080 }
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
  .grid .full { grid-column: 1 / -1 }
  .field label { display: block; font-size: 12px; color: var(--mut); margin-bottom: 5px }
  .field label i { color: var(--dim); font-style: normal; font-size: 11px }
  .chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mut) }
  .chk input { width: auto; accent-color: var(--accent) }
  .tip { font-size: 12px; color: var(--dim); line-height: 1.8; margin: 0 0 12px }
  .tip code { background: #0b0d10; border: 1px solid #2c313a; border-radius: 4px; padding: 1px 5px; font-size: 11.5px }
  .res { font-size: 12px; color: var(--accent2); margin-top: 10px; line-height: 1.8 }

/* ---------------------------------------------------------------- 库存 */
.stock-cell { cursor: pointer; color: var(--accent2); text-align: right;
  font-variant-numeric: tabular-nums }
.stock-cell:hover { text-decoration: underline }
.stock-cell.zero { color: var(--dim) }
.neg { color: #ff8a8a }
.dlg.wide { width: 960px }
.seg { display: inline-flex; gap: 2px; background: #0b0d10; border: 1px solid #2c313a;
  border-radius: 8px; padding: 2px }
.seg button { background: transparent; border: 0; color: var(--mut); font: inherit;
  font-size: 12px; padding: 5px 14px; border-radius: 6px; cursor: pointer }
.seg button.on { background: #1b2a3f; color: var(--accent2) }
.stk-sum { display: flex; gap: 30px; padding: 2px 2px 14px; flex-wrap: wrap }
.stk-sum div { font-size: 12px; color: var(--mut) }
.stk-sum b { display: block; font-size: 18px; font-weight: 500; color: var(--txt);
  font-variant-numeric: tabular-nums; margin-top: 2px }
.stk-sum b.neg { color: #ff8a8a }
.ledger-wrap { max-height: 42vh; overflow: auto; border: 1px solid var(--line2);
  border-radius: 8px }
.ledger-wrap table { font-size: 12.5px }
.ledger-wrap thead th { background: #14171c; z-index: 3 }
.ledger-wrap tbody td { padding: 7px 10px }
.dlg .filters { display: flex; gap: 8px; align-items: center; margin-bottom: 12px }
.dlg .filters input { width: 160px }
.dlg .filters .sp { flex: 1 }
#ledgerFilter { gap: 8px; align-items: center }
#ledgerFilter input[type=date] { width: 140px; padding: 6px 8px; font-size: 12px }

/* ======================================================== 表格列宽规范（2026-10-19 定稿）
   一句话：长度可预期的列定死宽度，只有内容不可预期的列才伸缩。
   ① table-layout:fixed，列宽用 px 写在页面自己的 .xx-tbl th:nth-child(n) 上，不用百分比
   ② 全表只留一个弹性列（width:auto 吃剩余），放不可预期内容（明细 / 地址）
   ③ 单元格统一 nowrap + ellipsis，超出省略、title 看全文；弹性列需要换行时加 class="wrap"
   ④ 行高必须恒定：内容超限折叠（如 +N），绝不让一行变两行
   ⑤ 兜底 min-width，更窄的屏幕横向滚动，绝不挤压关键列（固定宽度是契约） */
.tbl { table-layout: fixed; width: 100% }
.tbl > thead > tr > th,
.tbl > tbody > tr > td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tbl > tbody > tr > td.wrap { white-space: normal }
/* 固定列宽后，这两个旧的 max-width 限制不再需要（会误压弹性列） */
.tbl td.spec-cell, .tbl td.name-cell { width: auto; max-width: none }

/* ------------------------------------------------------------ 产品信息 */
.prod-tbl { min-width: 1240px }
.prod-tbl th:nth-child(1)  { width: 64px }    /* 序号 */
.prod-tbl th:nth-child(2)  { width: 190px }   /* 商品编码 */
.prod-tbl th:nth-child(3)  { width: 92px }    /* 类型 */
.prod-tbl th:nth-child(4)  { width: auto }    /* 显示名：唯一弹性列 */
.prod-tbl th:nth-child(5)  { width: 58px }    /* 杆径 */
.prod-tbl th:nth-child(6)  { width: 78px }    /* 整支长度 */
.prod-tbl th:nth-child(7)  { width: 58px }    /* 头宽 */
.prod-tbl th:nth-child(8)  { width: 76px }    /* 每件支数 */
.prod-tbl th:nth-child(9)  { width: 88px }    /* 实际库存 */
.prod-tbl th:nth-child(10) { width: 64px }    /* 占用 */
.prod-tbl th:nth-child(11) { width: 64px }    /* 在途 */
.prod-tbl th:nth-child(12) { width: 72px }    /* 可用 */
.prod-tbl th:nth-child(13) { width: 78px }    /* 安全库存 */
.prod-tbl th:nth-child(14) { width: 66px }    /* 状态 */
.prod-tbl th:nth-child(15) { width: 84px }    /* 操作 */

/* ------------------------------------------------------------ 客户信息 */
.cust-tbl { min-width: 1100px }
.cust-tbl th:nth-child(1) { width: 64px }     /* 序号 */
.cust-tbl th:nth-child(2) { width: 200px }    /* 客户名称：10 个汉字 */
.cust-tbl th:nth-child(3) { width: 96px }     /* 联系人 */
.cust-tbl th:nth-child(4) { width: 140px }    /* 电话 */
.cust-tbl th:nth-child(5) { width: auto }     /* 地址：唯一弹性列 */
.cust-tbl th:nth-child(6) { width: 220px }    /* 备注 */
.cust-tbl th:nth-child(7) { width: 66px }     /* 状态 */
.cust-tbl th:nth-child(8) { width: 84px }     /* 操作 */