/* 旺盛达客户聚合平台 · 共用样式
   浅色 · 极简 · 圆角卡片 · 品牌红作为点缀色 */
:root {
  --brand: #a0121f;
  --brand-weak: #fdf3f4;
  --bg: #f4f4f6;
  --card: #fff;
  --line: #ececee;
  --line-2: #e0e0e3;
  --ink: #1c1c1e;
  --ink-2: #55555a;
  --ink-3: #8e8e93;
  --ok: #0e8a6a;
  --warn: #c07a12;
  --err: #d0342c;
  --r: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  /* ⭐ 2026-09-21 老板：「上面的下单 标门/非标/卡门 订货单这里大小能不能砍一半，文字不变但空白缩小」
     → 页头这条从 **54 → 30**（字号一个没动，只压掉上下空白）。
        ⚠️ 30 是**下限**：右上角「用户名 / 角色」两行（13 + 11px）算下来 24px，加 4px 内边距 = 28，
           再往下压这个用户块就要溢出了。想更薄得先动那个两行块。
        ⚠️ 这是**全站**页头（6 个页面共用 `.top`），不是只有订货单页 —— 一条命令切回：
           bash .workbuddy/archive/页头砍半-2026-09-21/页头高度.sh half|old|thin|now */
  --toph: 30px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: 13px; }

/* ---------------- 布局 ---------------- */
.app { display: flex; height: 100vh; overflow: hidden; }
.sb {
  width: 216px; flex: 0 0 216px; background: #fbfbfc;
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  transition: width .16s ease, flex-basis .16s ease, margin-right .16s ease;
}
/* ⭐ 2026-09-20 老板：「左边的导航栏自动缩回去，给足够的空间给中间的下单板块空间」
                → 又说：「**移动到左边上去，可以弹出来**（左边的边栏）」
   → 所以：`.sb.min` = 常驻 **62px 图标条**；**鼠标移上去 → 弹出完整 216px 导航（浮层，不推内容）**；
     鼠标移开自动缩回（延迟 .18s，免得手一抖就闪）。
   ⭐ 弹出来怎么做到「不推内容」：**`flex-basis` 保持 62px 不动，只把 `width` 放大 + `margin-right` 负回 154px**
      → flex 布局算的还是 62px（`.main` 一点都不动），而`.sb` 这个盒子**视觉上盖住主区左边 154px**。
      配 `position:relative + z-index` 和一点阴影，就成「浮在上面」的样子。
   ⚠️ 收起时的隐藏规则**跟下面 ≤900px 那条媒体查询是同一种效果**（改一处记得看另一处）。
   ⚠️ 只有鼠标**落在左边这 62px 上**才弹 —— 在中间的表里干活不会误触。
   默认收起；状态记在 localStorage['wsd_nav']；底部「展开导航 / 收起导航」按钮 = 固定展开/收起。 */
.sb.min {
  width: 62px; flex-basis: 62px; position: relative; z-index: 40;
  transition-delay: .18s;                    /* 缩回慢半拍，手抖不闪 */
}
.sb.min .tt, .sb.min .gp, .sb.min .it span.tx, .sb.min .ft { display: none; }
.sb.min .logo { padding: 16px 0 10px; justify-content: center; }
.sb.min nav { padding: 4px 8px 8px; }
.sb.min .it { justify-content: center; padding: 9px 0; position: relative; }
/* 收起时那个「在线/离线」小点挪到图标右上角，别把图标挤歪 */
.sb.min .it .dot { position: absolute; top: 6px; right: 12px; margin: 0; }
/* ⭐ 悬停弹出：`flex-basis` 跟到 216（让 flex 认为它占 216），再用 `margin-right: -154px` 负回来
      → **净占 62px**（`.main` 一点都不动），而 `.sb` 这个盒子**画 216px、盖住主区左边 154px**。
   ⚠️ 别写成「flex-basis 保持 62 + 负 margin」—— 那样净占会变成 -92，主区反而被推大（踩过）。 */
.sb.min:hover {
  width: 216px; flex-basis: 216px; margin-right: -154px; transition-delay: 0s;
  box-shadow: 4px 0 22px rgba(0, 0, 0, .11);
}
.sb.min:hover .tt, .sb.min:hover .gp, .sb.min:hover .it span.tx, .sb.min:hover .ft { display: block; }
.sb.min:hover .logo { padding: 18px 18px 14px; justify-content: flex-start; }
.sb.min:hover nav { padding: 4px 10px 14px; }
.sb.min:hover .it { justify-content: flex-start; padding: 9px 10px; }
.sb.min:hover .it .dot { position: static; margin-left: auto; }
.sb.min:hover .navpin { margin: 0 10px 8px; padding: 8px 10px; justify-content: flex-start; }
.sb.min:hover .navpin .np-tx { display: inline; }
/* 展开 / 收起按钮（两种状态下都在侧栏底部） */
.navpin {
  display: flex; align-items: center; gap: 8px; margin: 0 10px 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer;
  color: var(--ink-2); font-size: 12.5px; user-select: none;
  transition: background .13s, color .13s;
}
.navpin:hover { background: #f2f2f5; color: var(--ink); }
.navpin svg { width: 15px; height: 15px; flex: 0 0 15px; }
.sb.min .navpin { margin: 0 8px 8px; padding: 8px 0; justify-content: center; }
.sb.min .navpin .np-tx { display: none; }
.sb .logo {
  padding: 18px 18px 14px; display: flex; align-items: center; gap: 10px;
}
.sb .logo .mk {
  width: 30px; height: 30px; border-radius: 9px; background: var(--brand);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  letter-spacing: -.5px; flex: 0 0 auto;
}
.sb .logo .tt { font-size: 14.5px; font-weight: 650; letter-spacing: -.2px; line-height: 1.2; }
.sb .logo .tt small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.sb nav { flex: 1; overflow-y: auto; padding: 4px 10px 14px; }
.sb .gp {
  font-size: 11px; color: var(--ink-3); padding: 14px 8px 6px; letter-spacing: .6px; font-weight: 600;
}
.sb .it {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  color: var(--ink-2); cursor: pointer; font-size: 13.5px; margin-bottom: 2px;
  transition: background .13s, color .13s; user-select: none;
}
.sb .it:hover { background: #f0f0f2; color: var(--ink); }
.sb .it.on { background: var(--brand-weak); color: var(--brand); font-weight: 600; }
.sb .it svg { width: 17px; height: 17px; flex: 0 0 17px; }
.sb .it .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #d4d4d8; margin-left: auto; flex: 0 0 auto;
}
.sb .it .dot.ok { background: #34c759; }
.sb .it .dot.bad { background: #ff9500; }
.sb .ft { padding: 10px 16px 14px; font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--line); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.top {
  height: var(--toph, 54px); flex: 0 0 var(--toph, 54px); background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 18px;
}
.top .ttl { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.top .ttl small { font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 8px; }
.top .sp { flex: 1; }
.top .acts { display: flex; align-items: center; gap: 8px; }
/* ⚠️ 2026-09-21 页头 54 → 30 之后，这个用户块必须跟着瘦（它是页头里最高的一块）：
   头像 28 → 22、上下内边距 4 → 0、两行文字行高 1.15 → 1.0 —— **字号一个没动**（13 / 11px）。
   算下来 24px 高，在 30px 的页头里上下各留 3px。 */
.who { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 2px; border-radius: 999px; }
.who:hover { background: #f3f3f5; }
.who .av {
  width: 22px; height: 22px; border-radius: 50%; background: var(--brand-weak); color: var(--brand);
  display: grid; place-items: center; font-weight: 650; font-size: 12px;
}
.who .nn { font-size: 13px; line-height: 1.0; }
.who .nn small { display: block; font-size: 11px; color: var(--ink-3); }
/* 页头里那个刷新按钮（只有它一个 .btn.sm）也跟着压，不然 23px 在 30px 页头里显得很胖 */
.top .btn.sm { padding: 2px 7px; }

.body { flex: 1; overflow: auto; padding: 16px 18px 40px; }
.body.flush { padding: 0; overflow: hidden; }
.body.flush iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ---------------- 卡片 / 表格 ---------------- */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; }
.card + .card { margin-top: 14px; }
.card > h3 {
  margin: 0 0 12px; font-size: 13px; font-weight: 650; color: var(--ink-2);
  letter-spacing: .3px; display: flex; align-items: center; gap: 8px;
}
.card > h3 .sp { flex: 1; }

.grid { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1180px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .g4, .g3, .g2 { grid-template-columns: 1fr; } .sb { width: 62px; flex-basis: 62px; } .sb .tt, .sb .gp, .sb .it span.tx { display: none; } }

.kpi .k { font-size: 12px; color: var(--ink-3); }
.kpi .v { font-size: 26px; font-weight: 680; letter-spacing: -1px; margin: 2px 0 0; }
.kpi .v small { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.kpi .s { font-size: 11.5px; color: var(--ink-3); }

.mods { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .mods { grid-template-columns: 1fr; } }
.mod {
  background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 16px;
  cursor: pointer; border: 1px solid transparent; transition: transform .14s, border-color .14s;
}
.mod:hover { transform: translateY(-2px); border-color: var(--line-2); }
.mod .ic {
  width: 36px; height: 36px; border-radius: 10px; background: var(--brand-weak); color: var(--brand);
  display: grid; place-items: center; margin-bottom: 10px;
}
.mod .ic svg { width: 19px; height: 19px; }
.mod .nm { font-size: 15px; font-weight: 650; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; }
.mod .ds { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; min-height: 38px; }
.mod .go { font-size: 12.5px; color: var(--brand); font-weight: 600; margin-top: 6px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; font-size: 13px; border-bottom: 1px solid var(--line); }
th { font-size: 11.5px; color: var(--ink-3); font-weight: 600; letter-spacing: .4px; background: #fafafb; }
tbody tr:hover { background: #fafafb; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 34px; text-align: center; color: var(--ink-3); font-size: 13px; }

.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  background: #f2f2f4; color: var(--ink-2); font-weight: 500; white-space: nowrap;
}
.tag.re { background: #fff1e8; color: #b25a17; }
.tag.blue { background: #eef3fd; color: #2f6fd0; }
.tag.grey { background: #f2f2f4; color: #77777c; }

/* ---------------- 控件 ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink); border-radius: 9px; padding: 7px 13px;
  font-size: 13px; cursor: pointer; transition: background .13s, border-color .13s; white-space: nowrap;
}
.btn:hover { background: #f6f6f8; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: #f2f2f4; }
.btn.danger { color: var(--err); border-color: #f3d6d4; }
.btn.danger:hover { background: #fdf3f2; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
.btn.sm svg { width: 13px; height: 13px; flex: 0 0 13px; }

input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 9px;
  background: #fff; color: var(--ink); outline: none; transition: border-color .13s, box-shadow .13s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(160,18,31,.08);
}
textarea { min-height: 62px; resize: vertical; }
.f { margin-bottom: 11px; }
.f label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.f label b { color: var(--brand); font-weight: 400; }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row > .f { margin-bottom: 0; }

/* ---------------- 弹窗 ---------------- */
.mask {
  position: fixed; inset: 0; background: rgba(20,20,22,.34); display: none;
  align-items: center; justify-content: center; z-index: 60; padding: 20px;
  backdrop-filter: blur(2px);
}
.mask.on { display: flex; }
.dlg {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.dlg.wide { max-width: 780px; }
.dlg h4 { margin: 0; padding: 16px 18px 12px; font-size: 15px; font-weight: 650; }
.dlg .cnt { padding: 0 18px 6px; overflow-y: auto; flex: 1; }
.dlg .ft {
  padding: 12px 18px 16px; display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--line); align-items: center;
}
.dlg .ft .sp { flex: 1; font-size: 12px; color: var(--ink-3); }

/* ---------------- 提示 ---------------- */
#toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); z-index: 90;
  background: #1c1c1e; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13px;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 80vw;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--err); }
.hint { font-size: 12px; color: var(--ink-3); }
.warnbox {
  background: #fff8ec; border: 1px solid #f2e2c6; color: #8a5a17; border-radius: 10px;
  padding: 10px 12px; font-size: 12.5px;
}

/* ---------------- 登录页 ---------------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1100px 520px at 50% -12%, #fdeff1 0%, var(--bg) 62%);
}
.login-card {
  width: 100%; max-width: 372px; background: #fff; border-radius: 18px; padding: 30px 28px 26px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 24px 60px rgba(0,0,0,.10);
}
.login-card .mk {
  width: 44px; height: 44px; border-radius: 13px; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 19px; letter-spacing: -1px;
  margin-bottom: 14px;
}
.login-card h1 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.4px; }
.login-card p.sub { margin: 0 0 22px; font-size: 12.5px; color: var(--ink-3); }
.login-card .btn.primary { width: 100%; justify-content: center; padding: 10px; font-size: 14px; margin-top: 6px; }
.err-box {
  background: #fdf3f2; color: var(--err); border: 1px solid #f5dbd8; border-radius: 9px;
  padding: 9px 11px; font-size: 12.5px; margin-bottom: 12px;
}