:root {
    --wms-primary: #2563eb;
    --wms-primary-dark: #1d4ed8;
    --wms-primary-050: #eff6ff;
    --wms-primary-100: #dbeafe;
    --wms-accent: #0d9488;
    --wms-danger: #dc2626;
    --wms-warn: #ea580c;
    --wms-ok: #16a34a;
    --wms-ink: #1f2937;
    --wms-muted: #6b7280;
    --wms-border: #e5e7eb;
    --wms-bg: #f4f6f9;
}

html, body { height: 100%; margin: 0; font-family: "Microsoft YaHei", "Segoe UI", system-ui, sans-serif; background: var(--wms-bg); color: var(--wms-ink); }

/* 统一主色按钮 */
.btn-primary { background: var(--wms-primary); border-color: var(--wms-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--wms-primary-dark); border-color: var(--wms-primary-dark); }
.btn-outline-primary { color: var(--wms-primary); border-color: var(--wms-primary); }
.btn-outline-primary:hover { background: var(--wms-primary); border-color: var(--wms-primary); }
a { color: var(--wms-primary); }

/* ---- shell ---- */
.wms-shell { display: flex; min-height: 100vh; }
/* 深色侧栏用带蓝调的墨色而非纯灰，和主色同色系，观感更整体 */
.wms-sidebar {
    width: 220px; flex-shrink: 0;
    background: linear-gradient(180deg, #1e293b 0%, #172033 100%);
    color: #cbd5e1;
    display: flex; flex-direction: column;
    border-right: 1px solid #0f172a;
}
.wms-brand {
    font-size: 1.05rem; font-weight: 700; color: #fff;
    padding: 18px 16px; letter-spacing: .3px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.wms-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wms-topbar { height: 54px; background: #fff; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }

/* ---- 「已打开页面」页签栏：顶栏下独立一行 ---- */
.page-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 6px 12px 0; background: #f8fafc; border-bottom: 1px solid #e5e7eb; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; }
.ptab { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: .84rem; color: #64748b; background: #eef2f7; border: 1px solid #e2e8f0; border-bottom: none; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; user-select: none; transition: background .12s, color .12s; }
.ptab:hover { background: #e2e8f0; color: #1f2937; }
.ptab.active { background: #fff; color: var(--wms-primary); font-weight: 600; border-color: #e5e7eb; position: relative; }
.ptab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #fff; }
.ptab.active::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--wms-primary); border-radius: 2px 2px 0 0; }
.ptab-x { font-size: .95rem; opacity: .5; border-radius: 50%; }
.ptab-x:hover { opacity: 1; background: #cbd5e1; color: #dc2626; }
.ptab-pin { font-size: .78rem; color: var(--wms-primary); }
/* 手机屏太窄放不下页签栏，走底部标签导航 */
@media (max-width: 640px) { .page-tabs { display: none; } }

/* ---- 商品分类树（参考旧系统类别树） ---- */
.cat-tree-root { padding: 4px 0; }
.ct-node { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; font-size: .92rem; }
.ct-node:hover { background: #f1f5f9; }
.ct-root { font-size: 1rem; padding-left: 6px !important; }
.ct-toggle { cursor: pointer; color: #94a3b8; font-size: .9rem; width: 18px; text-align: center; }
.ct-toggle:hover { color: var(--wms-primary); }
.ct-toggle-ph { width: 18px; display: inline-block; }
.ct-ico { color: #f59e0b; font-size: 1rem; }
.ct-actions { margin-left: auto; display: none; gap: 4px; }
.ct-node:hover .ct-actions { display: inline-flex; }
.ct-sel { background: #e0f2f1; color: #0f766e; }
.ct-sel:hover { background: #d3ecea; }
/* 隐藏滚动条但保留滚动能力（滚轮/触摸板照常）——侧栏面板用，视觉更干净 */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* 单据编辑页结算区：标签同一水平线 + 加粗着色 */
.settle-row .wms-field label, .settle-row > .col-settle-due > label { display: block; font-weight: 700; color: var(--wms-primary); margin-bottom: 6px; white-space: nowrap; }
.settle-row .dict-hint { color: var(--wms-primary); }
.settle-due { text-align: right; }
.settle-due .sd-val { font-size: 1.35rem; font-weight: 700; color: #dc2626; line-height: 38px; }

/* 数据字典左侧类型分组 */
.dict-group-title { font-size: .76rem; font-weight: 600; color: #94a3b8; letter-spacing: .05em; padding: 10px 6px 4px; border-bottom: 1px solid #f1f5f9; margin-bottom: 4px; }
.dict-group-title:first-child { padding-top: 2px; }

/* ---- 页签右键菜单 ---- */
.ctx-backdrop { position: fixed; inset: 0; z-index: 1050; }
.ctx-menu { position: fixed; z-index: 1051; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px; min-width: 140px; }
.ctx-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: .86rem; color: #374151; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.ctx-item:hover { background: #f1f5f9; color: var(--wms-primary); }
.ctx-item .bi { font-size: .8rem; opacity: .7; }
.wms-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.wms-hamburger { display: none; background: none; border: none; font-size: 1.5rem; color: #374151; cursor: pointer; padding: 2px 8px; line-height: 1; }
.wms-backdrop { display: none; }
.wms-username { color: #374151; font-size: .9rem; }
.wms-content { padding: 20px 24px; flex: 1; overflow: auto; }

/* ---- nav（可折叠一级/二级 + 统一图标）---- */
.wms-nav { padding: 6px 0; }
.wms-nav-group { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #94a3b8; padding: 10px 16px; font-size: .82rem; font-weight: 600; user-select: none; transition: background .12s, color .12s; }
.wms-nav-group:hover { background: #273244; color: #e2e8f0; }
.wms-gico { font-size: 1rem; width: 20px; text-align: center; color: #64d1c9; }
.wms-gtext { flex: 1; letter-spacing: .02em; }
.wms-chev { font-size: .75rem; opacity: .55; transition: transform .18s; }
.wms-nav-group.open .wms-chev { transform: rotate(180deg); }
.wms-nav-sub { padding-bottom: 4px; }
.wms-nav-link { display: flex; align-items: center; gap: 10px; color: #cbd5e1; text-decoration: none; padding: 8px 16px 8px 30px; font-size: .9rem; transition: background .12s, color .12s; }
.wms-nav-link:hover { background: #374151; color: #fff; }
.wms-nav-link.active { background: var(--wms-primary); color: #fff; }
.wms-ico { font-size: .95rem; width: 18px; text-align: center; opacity: .8; }
.wms-nav-link:hover .wms-ico, .wms-nav-link.active .wms-ico { opacity: 1; }

/* ---- 单级模块导航（一级在侧栏，二级进 /module/{key} 图标页）---- */
.wms-nav-top { display: flex; align-items: center; gap: 10px; color: #cbd5e1; text-decoration: none; padding: 11px 16px; font-size: .92rem; font-weight: 500; user-select: none; border-left: 3px solid transparent; transition: background .12s, color .12s; }
.wms-nav-top:hover { background: #273244; color: #fff; }
.wms-nav-top.active { background: var(--wms-primary); color: #fff; border-left-color: #64d1c9; }
.wms-nav-top.active .wms-gico { color: #fff; }

/* ---- 模块启动页：二级功能图标宫格 ---- */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; margin-top: 6px; }
.mod-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 8px 16px; background: #fff; border: 1px solid var(--wms-border); border-radius: 12px; text-decoration: none; color: #1f2937; transition: box-shadow .15s, transform .15s, border-color .15s; }
.mod-tile:hover { border-color: var(--wms-primary); box-shadow: 0 8px 20px rgba(37,99,235,.12); transform: translateY(-2px); color: var(--wms-primary); }
.mt-ico { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; }
.mt-text { font-size: .88rem; font-weight: 500; text-align: center; }
/* 图标底色循环：同一模块内相邻功能颜色错开，方便肉眼定位 */
.mt-c0 { background: linear-gradient(135deg,#2563eb,#3b82f6); }
.mt-c1 { background: linear-gradient(135deg,#0d9488,#14b8a6); }
.mt-c2 { background: linear-gradient(135deg,#d97706,#f59e0b); }
.mt-c3 { background: linear-gradient(135deg,#7c3aed,#8b5cf6); }
.mt-c4 { background: linear-gradient(135deg,#db2777,#ec4899); }
.mt-c5 { background: linear-gradient(135deg,#475569,#64748b); }
@media (max-width: 640px) { .mod-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } }

/* ---- login ---- */
/* 登录页：简约浅色——近白底上两团极淡的品牌色光晕，卡片细边浅影 */
.wms-login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: #f6f8fb;
    background-image:
        radial-gradient(640px 420px at 12% 8%, rgba(37, 99, 235, .09), transparent 62%),
        radial-gradient(560px 400px at 88% 94%, rgba(79, 70, 229, .07), transparent 62%);
}
.wms-login-card {
    width: 384px; background: #fff;
    border: 1px solid #e8ecf3; border-radius: 16px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .08);
    padding: 40px 36px 32px;
}
.wms-login-logo {
    width: 52px; height: 52px; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; color: #fff; font-size: 1.45rem;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}
.wms-login-title { text-align: center; font-size: 1.28rem; font-weight: 700; color: #111827; margin-bottom: 6px; letter-spacing: .3px; }
.wms-login-sub { text-align: center; color: #8b95a5; font-size: .84rem; margin-bottom: 28px; letter-spacing: .5px; }
.wms-login-card .form-label { font-size: .84rem; font-weight: 600; color: #4b5563; }
.wms-login-card .form-control {
    border-radius: 10px; border-color: #e2e7ef; background: #fafbfd;
    padding: .55rem .8rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.wms-login-card .form-control:focus { background: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.wms-login-card .btn-primary {
    border-radius: 10px; padding: .6rem; font-weight: 600; letter-spacing: 2px;
    background: linear-gradient(135deg, #2563eb, #3b5bdb); border: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .22);
}
.wms-login-card .btn-primary:hover:not(:disabled) { filter: brightness(1.06); }

/* ---- page bits ---- */
.wms-page-title { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin: 0 0 16px; }
.wms-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.card-surface {
    background: #fff;
    border: 1px solid var(--wms-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
}
.table-sm td, .table-sm th { vertical-align: middle; }

/* 表头：小号大写字距，视觉上和数据行拉开层级 */
.card-surface > table.table thead th {
    font-size: .78rem; font-weight: 700;
    letter-spacing: .4px; color: var(--wms-muted);
    text-transform: none;
    padding-top: 10px; padding-bottom: 10px;
    border-bottom: 1px solid var(--wms-border);
}
.card-surface > table.table tbody td { padding-top: 9px; padding-bottom: 9px; }

/* 数字列用等宽字形对齐——金额/数量右对齐时小数点不齐会显得很廉价 */
.table .text-end { font-variant-numeric: tabular-nums; }

/* 低于安全库存：整行淡红底 + 左侧红条。
   只把数量标红不够——列表长了以后要扫一眼就能找到哪几行需要补货。
   优先级要高过斑马纹，故用 !important 覆盖 :nth-child(even)。 */
.card-surface > table.table tbody tr.row-lowstock > * { background: #fef2f2 !important; }
.card-surface > table.table tbody tr.row-lowstock > *:first-child { box-shadow: inset 3px 0 0 var(--wms-danger); }
.card-surface > table.table tbody tr.row-lowstock:hover > * { background: #fee2e2 !important; }

/* ---- 单据行内展开明细（采购/销售/出入库/调拨/盘点共用） ---- */

/* 展开中的主行：浅底 + 左侧主色竖条，一眼看出明细属于哪一行。
   竖条只加在首个单元格上——加在 `> *` 会让每个 td 都画一条，整行变成栅格。 */
.card-surface > table.table tbody tr.row-expanded > * { background: var(--wms-primary-050); }
.card-surface > table.table tbody tr.row-expanded > *:first-child { box-shadow: inset 3px 0 0 var(--wms-primary); }

/* 明细行不参与主表的斑马纹和 hover，否则会被误认成一条单据 */
.card-surface > table.table tbody tr.detail-row > *,
.card-surface > table.table tbody tr.detail-row:hover > * { background: #f7f9fc; }

.detail-panel {
    padding: 10px 14px 12px 40px;   /* 左内缩，与展开箭头对齐，形成从属层级 */
    border-bottom: 1px solid var(--wms-border);
}

.detail-table { background: #fff; border: 1px solid var(--wms-border); border-radius: 8px; overflow: hidden; }
.detail-table thead th {
    background: #eef2f7; font-size: .76rem; font-weight: 700;
    color: var(--wms-muted); letter-spacing: .3px;
    padding: 7px 10px; border-bottom: 1px solid var(--wms-border);
}
.detail-table tbody td { padding: 7px 10px; font-size: .88rem; }
.detail-table tbody tr:hover > * { background: var(--wms-primary-050); }
.detail-table tfoot td {
    padding: 7px 10px; font-size: .85rem;
    background: #fafbfc; border-top: 2px solid var(--wms-border);
}
.detail-table .text-end { font-variant-numeric: tabular-nums; }

.btn { border-radius: 8px; font-weight: 500; }
.btn-sm { border-radius: 6px; }
.badge { font-weight: 600; letter-spacing: .2px; padding: .35em .6em; border-radius: 6px; }
.form-control, .form-select { border-radius: 8px; }
.wms-modal-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: wms-fade .12s ease-out;
}

/* 横长方形：宽 880px、整体高度压到 78vh 以内。
   关键是 flex 列 + 只让 body 滚动——头尾固定，标题和「保存」按钮永远可见，
   不必为了点保存先滚到底。原先整个弹窗一起滚（width:520 + overflow:auto），
   字段一多就变成又窄又高的长条。 */
.wms-modal {
    width: 880px; max-width: calc(100vw - 48px);
    max-height: 78vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .12);
    overflow: hidden;
    animation: wms-pop .14s ease-out;
}

/* 窄弹窗（改密码、单字段确认之类），逐页按需加 .wms-modal-sm */
.wms-modal-sm { width: 460px; }

/* ================= 精致表单弹窗 =================
   从「香橙科技贸易系统」AppBase 移植，与那套保持同一视觉语言。
   用法：.wms-modal.wms-form-modal + .wms-form-head + .wms-form-body + .wms-fsec 分节。
   与朴素的 .wms-modal-head/.wms-modal-body 并存，逐页按需替换。 */
.wms-form-modal { width: 1080px; max-width: 94vw; }
.wms-form-head {
    display: flex; align-items: center; gap: 12px; padding: 13px 24px;
    background: linear-gradient(135deg, #2f6fed, #4a86f7); color: #fff;
    border-radius: 14px 14px 0 0;
    flex-shrink: 0;
}
.wms-form-head .fh-ico {
    width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    flex-shrink: 0;
}
.wms-form-head .fh-title { font-size: 16px; font-weight: 600; line-height: 1.2; }
.wms-form-head .fh-sub { font-size: 12px; opacity: .85; }
/* 表单主体：弹窗高度有限，内容多时这里滚动 */
.wms-form-body { padding: 14px 24px 6px; overflow-y: auto; flex: 1 1 auto; }

/* 分节标题：左侧色条 + 图标 */
.wms-fsec {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; color: #2758af; font-size: 13.5px;
    margin: 14px 0 10px; padding-left: 10px; border-left: 3px solid #2f6fed;
}
.wms-fsec:first-child { margin-top: 4px; }
.wms-fsec .bi { color: #2f6fed; }

.wms-field { margin-bottom: 11px; }
/* 字段标签：加粗深色（全站表单统一，看着更清楚） */
.wms-field > label { display: block; font-size: 12.5px; color: #1f2937; margin-bottom: 3px; font-weight: 700; }
.wms-field .req { color: #e03131; margin-left: 2px; }
.wms-field .form-control, .wms-field .form-select { height: 38px; border-radius: 8px; border-color: #dfe4ec; font-size: 14px; }
.wms-field textarea.form-control { height: auto; }
.wms-field .form-control:focus, .wms-field .form-select:focus { border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47,111,237,.12); }

/* ---- 商品图片 ---- */
/* 列表缩略图 */
.prod-thumb {
    width: 34px; height: 34px; border-radius: 6px; object-fit: cover;
    border: 1px solid var(--wms-border); background: #fff; display: block;
}
.prod-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; background: #f8fafc; font-size: .9rem;
}
.prod-img-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
/* 编辑弹窗里的图片网格 */
.prod-img-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.prod-img-cell {
    position: relative; width: 104px; height: 104px;
    border: 1px solid var(--wms-border); border-radius: 8px; overflow: hidden; background: #f8fafc;
}
.prod-img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-img-cell.is-main { border-color: var(--wms-primary); box-shadow: 0 0 0 2px rgba(37,99,235,.18); }
.prod-img-cell .pic-main-tag {
    position: absolute; left: 0; top: 0; background: var(--wms-primary); color: #fff;
    font-size: .62rem; padding: 1px 6px; border-radius: 0 0 6px 0;
}
/* 操作按钮平时藏起来，悬停/聚焦才出现，免得盖住图 */
.prod-img-cell .pic-acts {
    position: absolute; right: 3px; bottom: 3px; display: flex; gap: 3px;
    opacity: 0; transition: opacity .12s;
}
.prod-img-cell:hover .pic-acts, .prod-img-cell:focus-within .pic-acts { opacity: 1; }
.prod-img-cell .pic-acts .btn { padding: 1px 6px; line-height: 1.2; }

/* 下方页签里的图片格子略大些，便于看清 */
.prod-img-cell-lg { width: 132px; height: 132px; }

/* 组合框的小提示图标：告诉用户这个字段有候选值可选 */
.dict-hint { color: #94a3b8; font-size: .78rem; margin-left: 2px; cursor: help; }

/* 订单履行进度徽标（发货/收款/开票、到货/付款/开票）：按完成度上色 */
.fulfill {
    display: inline-block; min-width: 46px; padding: 1px 8px; border-radius: 10px;
    font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fulfill.ff-none { background: #f1f5f9; color: #94a3b8; }              /* 未开始：灰 */
.fulfill.ff-part { background: #fff3e0; color: #c05621; }              /* 部分完成：橙，提示还欠 */
.fulfill.ff-done { background: #e8f5ee; color: #16a34a; }              /* 已结清：绿 */

/* 明细小计行：与数据行拉开区分，数字用等宽对齐 */
.card-surface > table.table tfoot tr.mov-subtotal > * {
    background: #f8fafc;
    font-weight: 700;
    border-top: 2px solid var(--wms-border);
    font-variant-numeric: tabular-nums;
}

/* 只读字段（如自动生成的编码）：一眼看出不是给你填的 */
.wms-field .form-control[readonly] {
    background: #f4f6f9; color: #6b7280; cursor: not-allowed;
    border-style: dashed;
}
.wms-field .form-control[readonly]:focus { border-color: #dfe4ec; box-shadow: none; }

/* 组合框 + 右侧「＋」按钮：贴合成一个整体控件 */
.dict-combo { display: flex; }
.dict-combo .form-control {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right: none; min-width: 0;
}
.dict-combo .dict-add {
    flex: 0 0 auto; height: 38px; padding: 0 9px;
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    display: flex; align-items: center; border-color: #dfe4ec; color: var(--wms-primary);
}
.dict-combo .dict-add:hover { background: var(--wms-primary); border-color: var(--wms-primary); color: #fff; }
/* 快速新增弹窗盖在商品弹窗之上 */
.dict-add-backdrop { z-index: 2200; }

/* ---- 图片预览（点缩略图放大）---- */
.img-viewer {
    position: fixed; inset: 0; z-index: 2500;
    background: rgba(15, 23, 42, .82);
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
    animation: wms-fade .12s ease-out;
}
.img-viewer > img {
    max-width: 92vw; max-height: 84vh;
    border-radius: 8px; background: #fff;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    object-fit: contain;
}
.img-viewer .iv-close {
    position: absolute; top: 16px; right: 20px;
    width: 38px; height: 38px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 1rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.img-viewer .iv-close:hover { background: rgba(255,255,255,.3); }
.img-viewer .iv-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 1.2rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.img-viewer .iv-nav:hover { background: rgba(255,255,255,.3); }
.img-viewer .iv-prev { left: 18px; }
.img-viewer .iv-next { right: 18px; }
.img-viewer .iv-cap {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: #e2e8f0; font-size: .8rem; display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,.35); padding: 5px 12px; border-radius: 20px; max-width: 80vw;
}
.img-viewer .iv-idx { color: #94a3b8; }

@keyframes wms-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- 商品搜索选择器 ---- */
.ppk { position: relative; }
/* 定位(fixed + 坐标)由组件内联样式给出：JS 量输入框视口位置，
   彻底避开表格 overflow 容器的裁剪。这里只管外观。 */
.ppk-drop {
    z-index: 1500;
    background: #fff; border: 1px solid var(--wms-border); border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15,23,42,.15);
    max-height: 280px; overflow-y: auto;
    max-width: 560px;
}
.ppk-item {
    display: flex; gap: 8px; align-items: baseline;
    padding: 6px 10px; cursor: pointer; font-size: .85rem;
}
.ppk-item:hover { background: var(--wms-primary-050); }
.ppk-item.ppk-hi { background: var(--wms-primary-100); }   /* 键盘高亮行 */
.ppk-code { font-weight: 600; color: var(--wms-primary); flex-shrink: 0; }
.ppk-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppk-unit { color: var(--wms-muted); font-size: .75rem; flex-shrink: 0; }
.ppk-more { padding: 6px 10px; color: var(--wms-muted); font-size: .78rem; background: #f8fafc; }

/* ---- 单据编辑页吸底操作条：明细行多时不用滚到底找保存按钮 ---- */
.doc-actionbar {
    position: sticky; bottom: 0; z-index: 100;
    background: #fff; border-top: 2px solid var(--wms-border);
    padding: 10px 16px; margin: 0 -16px -16px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    box-shadow: 0 -4px 12px rgba(15,23,42,.06);
}
.doc-actionbar .dab-totals { display: flex; gap: 18px; font-size: .88rem; color: var(--wms-muted); flex-wrap: wrap; }
.doc-actionbar .dab-totals b { color: var(--wms-ink); font-variant-numeric: tabular-nums; }
.doc-actionbar .dab-grand b { color: var(--wms-danger); font-size: 1.05rem; }

/* 精致筛选栏 */
.wms-filter { background: #fff; border: 1px solid #eceff4; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.wms-filter .ff-label { font-size: 12px; color: #6b7280; margin-bottom: 4px; display: block; }
.wms-filter .form-control, .wms-filter .form-select { height: 38px; border-radius: 8px; font-size: 13.5px; }
.wms-filter .wf-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.wms-filter .wf-item { flex: 1 1 130px; min-width: 112px; }
.wms-filter .wf-btns { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* 简版弹窗头：与 .wms-form-head 同款渐变，但不带图标/副标题。
   目前各页都已改用 .wms-form-head；这条留给只有一个标题、不值得配图标的新弹窗。 */
.wms-modal-head {
    flex: 0 0 auto;
    padding: 14px 24px;
    background: linear-gradient(135deg, #2f6fed, #4a86f7);
    color: #fff;
    border-radius: 14px 14px 0 0;
    font-weight: 600; font-size: 16px; letter-spacing: .2px;
}

.wms-modal-body {
    flex: 1 1 auto;
    padding: 16px 24px 6px;
    overflow-y: auto;
}

/* 输入框向 AppBase 的精致风格看齐（圆角/描边/聚焦光晕），
   同样作用于所有还没逐页改造的弹窗。明细表里的 sm 控件不受影响。 */
.wms-modal-body .form-control:not(.form-control-sm),
.wms-modal-body .form-select:not(.form-select-sm) {
    height: 38px; border-radius: 8px; border-color: #dfe4ec; font-size: 14px;
}
.wms-modal-body textarea.form-control { height: auto; }

.wms-modal-foot {
    flex: 0 0 auto;
    padding: 14px 22px;
    border-top: 1px solid var(--wms-border);
    background: #fafbfc;
    display: flex; justify-content: flex-end; gap: 10px;
}

/* 宽弹窗里标签压得更紧，让「宽而矮」真正生效：
   高度省下来靠的是每行更矮 + 一行放更多字段，而不只是把框拉宽 */
.wms-modal .form-label { margin-bottom: 3px; font-size: 12.5px; font-weight: 700; color: #1f2937; }
.wms-modal .form-control, .wms-modal .form-select { border-color: #dfe4ec; }
.wms-modal .form-control:focus, .wms-modal .form-select:focus {
    border-color: #2f6fed;
    box-shadow: 0 0 0 3px rgba(47,111,237,.12);
}

@keyframes wms-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes wms-pop { from { opacity: 0; transform: translateY(8px) scale(.99) } to { opacity: 1; transform: none } }

/* ---- dashboard KPI ---- */
/* minmax 从 150px 提到 190px：150px 装不下「待审核入库」这类 4 字标签，
   实测会断成「待审核入 / 库」。auto-fit 而非 auto-fill：让卡片撑满整行，
   避免末行只剩一个孤零零的卡片（原先 8+1 的布局）。 */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi {
    /* 现在是 <button>：清掉默认按钮样式 */
    appearance: none; font: inherit; text-align: left; width: 100%;
    background: #fff; border: 1px solid var(--wms-border);
    border-radius: 12px; padding: 16px; cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.kpi:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.kpi-num { font-size: 1.7rem; font-weight: 700; color: var(--wms-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
/* 标签不换行：宁可省略号也不断字，断字比截断更难读 */
.kpi-label { color: var(--wms-muted); font-size: .85rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-warn .kpi-num { color: var(--wms-danger); }

/* 带图标的 KPI 卡（首页） */
.kpi-ico { display: flex; align-items: center; gap: 12px; }
.kpi-ico-badge { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.kpi-ico-badge.c-blue { background: var(--wms-primary-100); color: var(--wms-primary); }
.kpi-ico-badge.c-teal { background: #ccfbf1; color: #0d9488; }
.kpi-ico-badge.c-amber { background: #ffedd5; color: #ea580c; }
.kpi-ico-badge.c-red { background: #fee2e2; color: #dc2626; }
.kpi-ico-badge.c-green { background: #dcfce7; color: #16a34a; }
.kpi-ico-badge.c-violet { background: #ede9fe; color: #7c3aed; }

/* 提醒卡 */
.alert-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.alert-card {
    /* 现在是 <button>：清掉浏览器默认按钮样式，并让文字左对齐（按钮默认居中） */
    appearance: none; font: inherit; text-align: left; width: 100%;
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--wms-border);
    border-left: 4px solid var(--wms-primary);
    border-radius: 12px; padding: 14px 16px; cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.alert-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.alert-card:focus-visible, .kpi:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--wms-primary-100), 0 4px 14px rgba(15, 23, 42, .08);
    border-color: var(--wms-primary);
}
.alert-card.warn { border-left-color: var(--wms-warn); }
.alert-card.danger { border-left-color: var(--wms-danger); }
.alert-card.ok { border-left-color: var(--wms-ok); }
.alert-card .ac-ico { font-size: 1.5rem; }
.alert-card .ac-num { font-size: 1.35rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.alert-card .ac-label { color: var(--wms-muted); font-size: .82rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 表格增强：表头吸顶 + 斑马纹 ---- */
.card-surface { position: relative; }
.card-surface > table.table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; box-shadow: inset 0 -1px 0 var(--wms-border); }
.table-hover > tbody > tr:hover > * { background: var(--wms-primary-050); }
.table > tbody > tr:nth-child(even) > * { background: #fbfcfe; }
.table > tbody > tr:nth-child(even):hover > * { background: var(--wms-primary-050); }

/* ---- 分页条 ---- */
.wms-pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.wms-pager .pg-info { color: var(--wms-muted); font-size: .85rem; }
.wms-pager .pg-spacer { margin-left: auto; }
.wms-pager .form-select-sm { width: auto; }

/* ---- 加载：转圈 + 骨架屏 ---- */
.wms-spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid var(--wms-primary-100); border-top-color: var(--wms-primary); border-radius: 50%; animation: wms-spin .7s linear infinite; vertical-align: middle; }
.wms-loading { display: flex; align-items: center; gap: 10px; color: var(--wms-muted); padding: 8px 0; }
@keyframes wms-spin { to { transform: rotate(360deg); } }
.wms-skel-row { height: 38px; border-radius: 6px; margin-bottom: 8px; background: linear-gradient(90deg,#eef1f5 25%,#f6f8fb 37%,#eef1f5 63%); background-size: 400% 100%; animation: wms-shimmer 1.3s ease infinite; }
@keyframes wms-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- 空状态 ---- */
.wms-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; color: var(--wms-muted); text-align: center; }
.wms-empty i { font-size: 2.6rem; opacity: .35; margin-bottom: 10px; }
.wms-empty .we-text { font-size: .95rem; }
.wms-empty .we-sub { font-size: .82rem; opacity: .8; margin-top: 4px; }

/* ================= 手机 / 窄屏适配（≤768px）================= */
@media (max-width: 768px) {
    /* 顶栏显示汉堡按钮 */
    .wms-hamburger { display: inline-flex; align-items: center; }
    .wms-topbar { padding: 0 12px; }

    /* 侧边栏改为可滑出的抽屉，默认隐藏在屏幕左外侧 */
    .wms-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        z-index: 1200; width: 78vw; max-width: 300px;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 2px 0 14px rgba(0, 0, 0, .3); overflow-y: auto;
    }
    .wms-sidebar.open { transform: translateX(0); }

    /* 抽屉打开时的半透明遮罩，点击可关闭 */
    .wms-backdrop.show {
        display: block; position: fixed; inset: 0;
        background: rgba(0, 0, 0, .45); z-index: 1100;
    }

    /* 正文更贴边、标题略小 */
    .wms-content { padding: 12px; }
    .wms-page-title { font-size: 1.1rem; margin-bottom: 12px; }

    /* 关键：表格在卡片内横向滚动，不再撑破屏幕 */
    .card-surface { padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card-surface > table { white-space: nowrap; }

    /* 工具栏：搜索框占满一行，按钮自然换行 */
    .wms-toolbar { gap: 8px; }
    .wms-toolbar .form-control,
    .wms-toolbar .form-select { max-width: none !important; flex: 1 1 100%; }
    .wms-toolbar .ms-auto { margin-left: 0 !important; }

    /* 登录卡片与弹窗自适应窄屏 */
    .wms-login-card { width: auto; max-width: 92vw; }

    /* 窄屏放弃「宽而矮」：横向没有余地，改为占满并放高，否则 78vh 里塞不下一行两列 */
    .wms-modal-backdrop { padding: 0; align-items: flex-end; }
    .wms-modal, .wms-modal-sm {
        width: 100vw; max-width: 100vw;
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
    }
    .wms-modal-head, .wms-modal-body, .wms-modal-foot { padding-left: 16px; padding-right: 16px; }
}

/* ================= 移动端底部标签栏 + 我的页 ================= */
.mobile-tabbar { display: none; }
.mine-header { background: linear-gradient(135deg, #1e3a8a, #2563eb); color: #fff; padding: 26px 20px; display: flex; align-items: center; gap: 14px; border-radius: 12px; }
.mine-avatar i { font-size: 3rem; opacity: .95; }
.mine-name { font-size: 1.3rem; font-weight: 700; }
.mine-role { color: #cbd5e1; font-size: .85rem; margin-top: 2px; }
.mine-menu { background: #fff; margin: 12px 0; border: 1px solid #eef2f7; border-radius: 12px; overflow: hidden; }
.mine-item { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; color: #1f2937; cursor: pointer; }
.mine-item:last-child { border-bottom: none; }
.mine-item:active { background: #f8fafc; }
.mine-item > i:first-child { font-size: 1.2rem; color: #2563eb; width: 24px; text-align: center; }
.mine-arrow { margin-left: auto; color: #cbd5e1; font-size: .9rem; }
.mine-logout { color: #dc2626; justify-content: center; font-weight: 600; }
.mine-logout > i:first-child { color: #dc2626; }

@media (max-width: 768px) {
    .mobile-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; background: #fff; border-top: 1px solid #e5e7eb; z-index: 1300; box-shadow: 0 -2px 10px rgba(0,0,0,.05); }
    .mtab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #94a3b8; text-decoration: none; font-size: .68rem; }
    .mtab i { font-size: 1.35rem; }
    .mtab.active { color: #2563eb; }
    /* 正文底部留出标签栏高度 */
    .wms-content { padding-bottom: 70px !important; }
}

/* ================= 打印报表框架 ================= */
/* 打印专用块在屏幕上隐藏 */
.print-only { display: none; }

@media print {
    /* 隐藏所有屏幕 UI（导航/顶栏/工具栏/按钮/标记了 no-print 的） */
    .wms-sidebar, .wms-topbar, .wms-hamburger, .wms-backdrop, .wms-toolbar, .btn, .no-print, .mobile-tabbar { display: none !important; }
    /* 打印时正文不要给底部标签栏留白 */
    .wms-content { padding-bottom: 0 !important; }
    html, body, .wms-shell, .wms-main, .wms-content { background: #fff !important; margin: 0 !important; padding: 0 !important; display: block !important; }
    .wms-content { padding: 0 !important; overflow: visible !important; }
    .print-only { display: block !important; }
    @page { size: A4; margin: 1.4cm; }

    /* ---- 单表报表（列表页）：抬头 + 规范表格 ---- */
    .print-report-head { display: block !important; text-align: center; margin-bottom: 12px; }
    .print-report-head .prh-title { font-size: 18pt; font-weight: bold; letter-spacing: 2px; }
    .print-report-head .prh-sub { font-size: 10pt; color: #333; margin-top: 4px; }
    .wms-page-title { display: none !important; }
    .card-surface { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
    table.table { width: 100% !important; border-collapse: collapse !important; font-size: 10pt !important; }
    table.table th, table.table td { border: 1px solid #333 !important; padding: 4px 6px !important; color: #000 !important; }
    table.table thead th { background: #eee !important; position: static !important; box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table > tbody > tr:nth-child(even) > * { background: #fff !important; }

    /* ---- 主从单据报表 ---- */
    .print-doc { font-family: "SimSun", "宋体", serif; color: #000; font-size: 10.5pt; }
    .pd-company { text-align: center; font-size: 15pt; font-weight: bold; }
    .pd-title { text-align: center; font-size: 20pt; font-weight: bold; letter-spacing: 6px; margin: 2px 0 12px; }
    .pd-meta { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
    .pd-meta td { padding: 4px 8px; vertical-align: top; }
    .pd-meta .pd-mlabel { color: #333; width: 78px; white-space: nowrap; }
    .pd-table { width: 100%; border-collapse: collapse; }
    .pd-table th, .pd-table td { border: 1px solid #000; padding: 5px 7px; }
    .pd-table thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; text-align: center; }
    .pd-table .pd-num { text-align: right; }
    .pd-table tfoot td { font-weight: bold; }
    .pd-sign { display: flex; justify-content: space-between; margin-top: 26px; padding: 0 4px; }
    .pd-foot-time { text-align: right; margin-top: 10px; font-size: 9pt; color: #555; }
}

/* ---- 业务主流程 ---- */
.wms-flow { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }

.wms-flow-step {
    flex: 1 1 160px;
    min-width: 150px;
    background: #fff;
    border: 1px solid var(--wms-border);
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.wms-flow-step:hover { border-color: var(--wms-primary); box-shadow: 0 4px 14px rgba(37,99,235,.12); }
.wms-flow-step:focus-visible { outline: 2px solid var(--wms-primary); outline-offset: 2px; }
/* 有待办的环节高亮：这一步卡住了活 */
.wms-flow-step.has-pending { border-color: #fdba74; background: #fffbf5; }

.wfs-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wfs-no {
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%; background: var(--wms-primary); color: #fff;
    font-size: .75rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.wfs-badge {
    margin-left: auto; font-size: .68rem; font-weight: 600;
    padding: 2px 7px; border-radius: 10px;
    background: var(--wms-warn); color: #fff; white-space: nowrap;
}
.wfs-badge.done { background: #e8f5ee; color: var(--wms-ok); }
.wfs-title { font-size: .95rem; font-weight: 700; color: var(--wms-ink); }
.wfs-sub { font-size: .72rem; color: var(--wms-muted); margin-top: 3px; }

.wms-flow-arrow {
    display: flex; align-items: center; color: #cbd5e1; font-size: 1.1rem;
    flex: 0 0 auto; padding: 0 2px;
}
@media (max-width: 720px) {
    /* 窄屏改竖排：箭头跟着转 90 度，不然横箭头指向断行处很怪 */
    .wms-flow { flex-direction: column; }
    .wms-flow-arrow { transform: rotate(90deg); justify-content: center; padding: 2px 0; }
}

/* 明细行：同一张单的首行加一条分隔线，视觉上把单据分组 */
.card-surface > table.table tbody tr.line-order-start > * { border-top: 1px solid #dbe2ea; }

/* ---- 主体卡片（仓库 / 供应商 / 客户）----
   点卡片在下方展开明细。卡片本身 no-print，打印仍走同页的 print-only 表格。 */
.wms-card-grid {
    display: grid;
    /* auto-fill + minmax：仓库几个都能排，窄屏自动落行，不写死列数 */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.wms-ecard {
    position: relative;
    background: #fff;
    border: 1px solid var(--wms-border);
    border-left: 3px solid var(--wms-border);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: box-shadow .15s, border-color .15s, background .15s;
}
.wms-ecard:hover { border-color: var(--wms-primary); box-shadow: 0 4px 14px rgba(37,99,235,.12); }
.wms-ecard:focus-visible { outline: 2px solid var(--wms-primary); outline-offset: 2px; }
.wms-ecard.selected { border-color: var(--wms-primary); border-left-color: var(--wms-primary); background: var(--wms-primary-050); box-shadow: 0 4px 14px rgba(37,99,235,.16); }
/* 停用主体：整卡压暗，一眼区分，但仍可点开看历史数据 */
.wms-ecard.is-off { background: #fafafa; }
.wms-ecard.is-off .wms-ec-name { color: var(--wms-muted); }

/* 「全部仓库」汇总卡：与真实仓库卡区分开，不然像多了一个叫「全部」的仓 */
.wms-ecard-all { border-left-color: var(--wms-accent); background: linear-gradient(180deg, #f8fdfc 0%, #fff 60%); }
.wms-ecard-all .wms-ec-code { color: var(--wms-accent); }
.wms-ecard-all.selected { border-left-color: var(--wms-primary); }

.wms-ec-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.wms-ec-code { font-size: .72rem; font-weight: 600; color: var(--wms-muted); letter-spacing: .04em; }
.wms-ec-name { font-size: 1.02rem; font-weight: 700; color: var(--wms-ink); line-height: 1.3; word-break: break-all; }
.wms-ec-badge { margin-left: auto; flex-shrink: 0; }

/* 卡片指标行：种类数 / 库存总量 / 库位数 */
.wms-ec-stats { display: flex; gap: 14px; border-top: 1px dashed var(--wms-border); padding-top: 10px; }
.wms-ec-stat { min-width: 0; }
.wms-ec-sv { font-size: 1.05rem; font-weight: 700; color: var(--wms-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.wms-ec-sv.muted { color: #cbd5e1; }
.wms-ec-sl { font-size: .7rem; color: var(--wms-muted); margin-top: 2px; white-space: nowrap; }

/* 卡片副信息（联系人/电话等） */
.wms-ec-meta { font-size: .78rem; color: var(--wms-muted); line-height: 1.7; }
.wms-ec-meta i { width: 14px; text-align: center; margin-right: 4px; opacity: .7; }
.wms-ec-meta .em-empty { color: #cbd5e1; }

/* 选中卡片底部的小箭头，指向下方明细面板 */
.wms-ecard.selected::after {
    content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #fff;
    border-right: 1px solid var(--wms-primary); border-bottom: 1px solid var(--wms-primary);
}

/* ---- 展开的明细面板 ---- */
.wms-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--wms-border); }
.wms-detail-title { font-size: 1.02rem; font-weight: 700; color: var(--wms-ink); }
.wms-detail-close { margin-left: auto; }
/* 负责人/电话/地址：卡片上不放，收在明细面板顶部 */
.wms-detail-info { display: flex; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: var(--wms-muted); }
.wms-detail-info .di-label { color: #9ca3af; margin-right: 4px; }
.wms-detail-info .di-empty { color: #cbd5e1; }

@media (max-width: 640px) {
    .wms-card-grid { grid-template-columns: 1fr; }
}

/* ---- 统一单据状态徽章（DocStatus 组件）----
   琥珀=待办（草稿/待审批），绿=已完成动作（已确认/已审核/已通过），红=驳回/作废。
   浅底描边款式比实心块柔和，但色相分明，一眼可辨。 */
.badge.st-draft { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; font-weight: 600; }
.badge.st-done  { background: #d1fae5; color: #047857; border: 1px solid #6ee7b7; font-weight: 600; }
.badge.st-void  { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; font-weight: 600; }
.badge.st-plain { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; font-weight: 600; }
.badge.st-draft i, .badge.st-done i, .badge.st-void i { margin-right: 4px; font-size: .85em; }

/* 草稿行：整行淡琥珀底 + 左侧色条，扫一眼就能挑出还没处理的单。
   悬停/选中态（bootstrap hover、row-expanded）优先级更高，不受影响。 */
tr.row-draft > td { background: #fffcf0; }
tr.row-draft > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

/* ---- 工作台 ---- */
.wb-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: stretch; }   /* 等高：两张卡片一样高更整齐 */
@media (max-width: 900px) { .wb-cols { grid-template-columns: 1fr; } }
.wb-unit { font-size: .75rem; font-weight: 500; color: #94a3b8; margin: 0 2px; }
.wb-amt { font-size: .95rem; font-weight: 700; color: #475569; }
.wb-todo-list { display: flex; flex-direction: column; }
.wb-todo { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: var(--wms-ink); border-radius: 8px; transition: background .12s; }
.wb-todo:last-child { border-bottom: none; }
.wb-todo:hover { background: #f8fafc; }
.wb-t-ico { font-size: 1.1rem; color: var(--wms-primary); width: 26px; text-align: center; }
.wb-t-text { flex: 1; font-size: .92rem; font-weight: 500; }
.wb-t-go { font-size: .8rem; color: var(--wms-primary); white-space: nowrap; }
.wb-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.wb-q { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; background: #f8fafc; border: 1px solid var(--wms-border); border-radius: 10px; text-decoration: none; color: var(--wms-ink); font-size: .85rem; font-weight: 500; transition: all .15s; }
.wb-q i { font-size: 1.3rem; color: var(--wms-primary); }
.wb-q:hover { border-color: var(--wms-primary); color: var(--wms-primary); box-shadow: 0 4px 12px rgba(37,99,235,.1); transform: translateY(-1px); }

/* ---- 成交价历史弹窗 ---- */
.ph-last { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.ph-last-label { font-size: .82rem; color: #047857; font-weight: 600; }
.ph-last-price { font-size: 1.5rem; font-weight: 800; color: #065f46; margin-top: 2px; }
.ph-last-tax { font-size: .85rem; font-weight: 500; color: #059669; }
tr.ph-same > td { background: #ecfdf5; }

/* ---- 扫码枪录入框（入库/出库编辑页）---- */
.scanbox { display: flex; align-items: center; gap: 8px; background: #f0f9ff; border: 1px dashed #7dd3fc; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.scanbox-off { background: #f8fafc; border-color: #e2e8f0; }
.sb-ico { font-size: 1.15rem; color: #0284c7; }
.scanbox-off .sb-ico { color: #94a3b8; }
.sb-input { max-width: 280px; }
.sb-msg { font-size: .85rem; font-weight: 600; }
.sb-msg.ok { color: #047857; }
.sb-msg.bad { color: #b91c1c; }

/* 商品搜索下拉里的库存徽标 */
.ppk-stock { font-size: .78rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.ppk-stock.has { background: #d1fae5; color: #047857; }
.ppk-stock.none { background: #fee2e2; color: #b91c1c; }

/* ---- 购销统计横向条形图 ---- */
.hbar-list { display: flex; flex-direction: column; gap: 8px; }
.hbar-row { display: flex; align-items: center; gap: 10px; }
.hbar-label { flex: 0 0 200px; font-size: .85rem; color: var(--wms-ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { flex: 1 1 auto; background: #f1f5f9; border-radius: 6px; height: 20px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 6px; min-width: 2px; transition: width .3s ease; }
.hbar-val { flex: 0 0 110px; font-size: .85rem; font-weight: 600; color: var(--wms-ink); text-align: right; white-space: nowrap; }
.hb-c0 { background: linear-gradient(90deg,#2563eb,#3b82f6); }
.hb-c1 { background: linear-gradient(90deg,#0d9488,#14b8a6); }
.hb-c2 { background: linear-gradient(90deg,#d97706,#f59e0b); }
.hb-c3 { background: linear-gradient(90deg,#7c3aed,#8b5cf6); }
.hb-c4 { background: linear-gradient(90deg,#db2777,#ec4899); }
.hb-c5 { background: linear-gradient(90deg,#475569,#64748b); }
@media (max-width: 640px) { .hbar-label { flex-basis: 110px; } .hbar-val { flex-basis: 80px; } }

/* 工具栏「待处理 N」筹码：琥珀胶囊，点击切换只看待办；激活态实心 */
.chip-draft { display: inline-flex; align-items: center; gap: 5px; background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; border-radius: 999px; padding: 5px 12px; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s; }
.chip-draft:hover { background: #fde68a; }
.chip-draft.on { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.chip-draft i { font-size: .8em; }
.chip-draft b { font-weight: 800; }


/* ---- 合并页的子页签（库存查询：余额/在途/台账；往来对账：对账/账龄）---- */
.subtabs { display: inline-flex; gap: 4px; background: #f1f5f9; border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.stab { padding: 6px 16px; border-radius: 8px; font-size: .88rem; font-weight: 500; color: #475569; text-decoration: none; transition: all .12s; }
.stab:hover { color: var(--wms-primary); }
.stab.on { background: #fff; color: var(--wms-primary); font-weight: 600; box-shadow: 0 1px 4px rgba(15,23,42,.1); }

/* ---- 手机端查询页（客户欠款 / 商品查询）---- */
.m-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--wms-border); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.m-search i { color: #94a3b8; }
.m-search .form-control { border: none; box-shadow: none; padding: 2px 4px; }
.m-sumbar { display: flex; align-items: center; font-size: .85rem; color: var(--wms-muted); padding: 0 4px 8px; }
.m-card { background: #fff; border: 1px solid var(--wms-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
.m-card:active { background: #f8fafc; }
.m-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.m-title { font-weight: 600; font-size: .95rem; color: var(--wms-ink); }
.m-sub { font-size: .78rem; color: #94a3b8; }
.m-money { font-size: 1.15rem; font-weight: 800; color: #dc2626; }
.m-detail { border-top: 1px dashed #e5e7eb; margin-top: 10px; padding-top: 8px; cursor: default; }
.m-line { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .85rem; border-bottom: 1px solid #f8fafc; }
.m-line:last-child { border-bottom: none; }
.m-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.m-seg { display: inline-flex; background: #f1f5f9; border-radius: 8px; padding: 3px; margin-bottom: 6px; gap: 3px; }
.m-seg button { border: none; background: none; padding: 4px 14px; border-radius: 6px; font-size: .82rem; color: #475569; }
.m-seg button.on { background: #fff; color: var(--wms-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,.08); }

/* ---- 系统设置：主题色色板 ---- */
.theme-swatch { width: 40px; height: 40px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; color: #fff; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s; }
.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.on { border-color: #1f2937; box-shadow: 0 0 0 2px #fff inset; }