/* ===== 气动元件进销存系统 样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #1a5fb4;
  --primary-dark: #13437f;
  --primary-light: #e8f0fb;
  --success: #2e9e5b;
  --danger: #d64545;
  --warn: #e8a33d;
  --text: #1f2937;
  --text-2: #6b7280;
  --border: #e5e7eb;
  --bg: #f5f7fa;
  --card: #fff;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
}
html, body { height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--primary); text-decoration: none; }

/* ===== 登录 ===== */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #123a6b 0%, #1a5fb4 60%, #2f7cd1 100%); padding: 20px; }
.login-box { background: #fff; border-radius: 14px; padding: 40px 36px; width: 100%; max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.login-logo { font-size: 24px; font-weight: 700; color: var(--primary); text-align: center; line-height: 1.3; }
.login-sub { text-align: center; color: var(--text-2); font-size: 13px; margin: 8px 0 26px; }
.login-box .input { margin-bottom: 14px; }
.login-remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); margin-bottom: 12px; cursor: pointer; user-select: none; }
.login-remember input { width: auto; }
.login-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; }
.login-quick-label { font-size: 12px; color: var(--text-2); }
.login-quick-user { font-size: 12px; }
.login-tip { margin-top: 16px; text-align: center; font-size: 12px; color: var(--text-2); }

/* ===== 布局 ===== */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 52px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.topbar-left { display: flex; align-items: center; gap: 10px; }
.app-title { font-size: 16px; font-weight: 600; }
.icon-btn { background: none; border: none; color: #fff; font-size: 20px; padding: 4px 8px; border-radius: 6px; }
.icon-btn:hover { background: rgba(255,255,255,.15); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.user-info { font-size: 13px; opacity: .95; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.12); }

.layout { display: flex; min-height: calc(100vh - 52px); }
.sidebar { width: 200px; background: var(--card); border-right: 1px solid var(--border); padding: 10px 8px; flex-shrink: 0;
  position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { font-size: 11px; color: var(--text-2); padding: 12px 10px 4px; font-weight: 600; }
.nav-item { display: block; padding: 9px 12px; border-radius: 6px; color: var(--text); cursor: pointer; }
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.content { flex: 1; padding: 18px; min-width: 0; }

/* ===== 组件 ===== */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
.card-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.page-title { font-size: 17px; font-weight: 700; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 14px;
  border-radius: 6px; border: 1px solid transparent; font-size: 13px; background: var(--primary); color: #fff; }
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #237a47; }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #fdf0f0; }
.btn-ghost { background: #fff; color: var(--text-2); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-block { width: 100%; }
.input, select.input, textarea.input { width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff; outline: none; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(26,95,180,.12); }
.label { display: block; font-size: 12px; color: var(--text-2); margin: 10px 0 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
.form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--text-2); }

/* 表格 */
.table-wrap { }
/* 表头吸顶：页面表格吸在顶栏下方，弹窗内表格吸在弹窗滚动容器顶部。
   注意：.table-wrap 不得设置 overflow（任何非 visible 都会让 sticky 失效，改由页面级横向滚动承载） */
.table-wrap thead th { position: sticky; top: 52px; z-index: 30; box-shadow: 0 1px 0 var(--border); }
.modal .table-wrap thead th { top: 0; }
/* 商品管理表：列多，压缩内边距与字号，让库位等列一屏内可见 */
#p-table th, #p-table td { padding: 6px 5px; font-size: 12px; white-space: nowrap; }
#p-table tbody td:nth-child(3), #p-table tbody td:nth-child(4), #p-table tbody td:nth-child(5) { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
/* 库存查询表：列宽固定、表格贴合内容，避免列内大片空白和横向拖动条 */
#st-table { table-layout: fixed; width: auto; min-width: 0; }
#st-table th, #st-table td { padding: 6px 5px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#st-table tbody td:nth-child(2), #st-table tbody td:nth-child(3), #st-table tbody td:nth-child(4) { max-width: 130px; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; min-width: 0; }
.table th { background: var(--bg); text-align: left; padding: 9px 10px; font-weight: 600; color: var(--text-2);
  border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table td { padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 操作列按钮：横排不换行，td 保持表格单元格身份保证列宽正常 */
.table td.actions { white-space: nowrap; }
.table td.actions .btn-sm, .table td.actions .item-remove { display: inline-block; vertical-align: middle; white-space: nowrap; }
/* 财务应收账：11 列，操作列固定 */
#f-ar-table th, #f-ar-table td { overflow: hidden; text-overflow: ellipsis; }
#f-ar-table th:nth-child(1), #f-ar-table td:nth-child(1) { width: 18%; }
#f-ar-table th:nth-child(2), #f-ar-table td:nth-child(2) { width: 7%; }
#f-ar-table th:nth-child(3), #f-ar-table td:nth-child(3) { width: 11%; }
#f-ar-table th:nth-child(4), #f-ar-table td:nth-child(4) { width: 9%; }
#f-ar-table th:nth-child(5), #f-ar-table td:nth-child(5) { width: 6%; }
#f-ar-table th:nth-child(6), #f-ar-table td:nth-child(6) { width: 9%; }
#f-ar-table th:nth-child(7), #f-ar-table td:nth-child(7) { width: 9%; }
#f-ar-table th:nth-child(8), #f-ar-table td:nth-child(8) { width: 9%; }
#f-ar-table th:nth-child(9), #f-ar-table td:nth-child(9) { width: 9%; }
#f-ar-table th:nth-child(10), #f-ar-table td:nth-child(10) { width: 8%; }
#f-ar-table th:nth-child(11), #f-ar-table td:nth-child(11) { width: 100px; }
/* 财务应付账：8 列 */
#f-ap-table th, #f-ap-table td { overflow: hidden; text-overflow: ellipsis; }
#f-ap-table th:nth-child(1), #f-ap-table td:nth-child(1) { width: 22%; }
#f-ap-table th:nth-child(2), #f-ap-table td:nth-child(2) { width: 9%; }
#f-ap-table th:nth-child(3), #f-ap-table td:nth-child(3) { width: 13%; }
#f-ap-table th:nth-child(4), #f-ap-table td:nth-child(4) { width: 13%; }
#f-ap-table th:nth-child(5), #f-ap-table td:nth-child(5) { width: 9%; }
#f-ap-table th:nth-child(6), #f-ap-table td:nth-child(6) { width: 13%; }
#f-ap-table th:nth-child(7), #f-ap-table td:nth-child(7) { width: 13%; }
#f-ap-table th:nth-child(8), #f-ap-table td:nth-child(8) { width: 100px; }
/* 财务收款记录：6 列 */
#f-rec-table th, #f-rec-table td { overflow: hidden; text-overflow: ellipsis; }
#f-rec-table th:nth-child(1), #f-rec-table td:nth-child(1) { width: 20%; }
#f-rec-table th:nth-child(2), #f-rec-table td:nth-child(2) { width: 22%; }
#f-rec-table th:nth-child(3), #f-rec-table td:nth-child(3) { width: 12%; }
#f-rec-table th:nth-child(4), #f-rec-table td:nth-child(4) { width: 12%; }
#f-rec-table th:nth-child(5), #f-rec-table td:nth-child(5) { width: 24%; }
#f-rec-table th:nth-child(6), #f-rec-table td:nth-child(6) { width: 130px; }
/* 其他出入库：8 列 */
#io-table th, #io-table td { overflow: hidden; text-overflow: ellipsis; }
#io-table th:nth-child(1), #io-table td:nth-child(1) { width: 13%; }
#io-table th:nth-child(2), #io-table td:nth-child(2) { width: 7%; }
#io-table th:nth-child(3), #io-table td:nth-child(3) { width: 9%; }
#io-table th:nth-child(4), #io-table td:nth-child(4) { width: 9%; }
#io-table th:nth-child(5), #io-table td:nth-child(5) { width: 28%; }
#io-table th:nth-child(6), #io-table td:nth-child(6) { width: 16%; }
#io-table th:nth-child(7), #io-table td:nth-child(7) { width: 8%; }
#io-table th:nth-child(8), #io-table td:nth-child(8) { width: 130px; }
/* 列数很多的表（商品管理、库存流水等）保留横向滚动：auto 布局 + 最小宽度 */
#p-table, #sl-table, #cp-table, #ch-table { table-layout: auto; min-width: 1200px; }
/* 其他出入库列表：商品明细限宽省略，悬停显示全文 */
#io-tbody td.io-items-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
#io-tbody tr { cursor: pointer; }
#io-tbody thead th:nth-child(5), #io-tbody td:nth-child(5) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.table tr:hover td { background: #fafbfc; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .right { text-align: right; }
.table .actions { gap: 6px; }
/* 商品管理表格：名称/规格限宽省略，操作列冻结右侧始终可见 */
#p-table th:nth-child(2), #p-table td:nth-child(2),
#p-table th:nth-child(3), #p-table td:nth-child(3) {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
/* 商品表操作按钮横排 */
#p-table td.actions { display: table-cell; white-space: nowrap; }
#p-table td.actions .btn-sm { display: inline-block; padding: 3px 4px; font-size: 12px; white-space: nowrap; margin-right: 1px; }
#p-table thead th:last-child { position: sticky; right: 0; z-index: 2; }
#p-table td.actions { position: sticky; right: 0; background: var(--card); z-index: 1; box-shadow: -2px 0 6px rgba(0,0,0,.05); }
#p-table tr:hover td.actions { background: #fafbfc; }
/* 客户管理表格：每列明确宽度比例，铺满容器，任何窗口下列都够用，无横向拖动条 */
#c-table { table-layout: fixed; width: 100%; min-width: 0; }
#c-table th, #c-table td { overflow: hidden; text-overflow: ellipsis; }
#c-table th:nth-child(1), #c-table td:nth-child(1) { width: 7%; }
#c-table th:nth-child(2), #c-table td:nth-child(2) { width: 22%; }
#c-table th:nth-child(3), #c-table td:nth-child(3) { width: 8%; }
#c-table th:nth-child(4), #c-table td:nth-child(4) { width: 13%; }
#c-table th:nth-child(5), #c-table td:nth-child(5) { width: 8%; }
#c-table th:nth-child(6), #c-table td:nth-child(6) { width: 5%; }
#c-table th:nth-child(7), #c-table td:nth-child(7) { width: 10%; }
#c-table th:nth-child(8), #c-table td:nth-child(8) { width: 6%; }
#c-table th:nth-child(9), #c-table td:nth-child(9) { width: 250px; }
/* 客户表操作按钮紧凑横排，不换行 */
#c-table td.actions { display: table-cell; white-space: nowrap; }
#c-table td.actions .btn-sm { display: inline-block; padding: 3px 4px; font-size: 12px; white-space: nowrap; margin-right: 1px; }
/* 供应商管理表格：名称限宽，操作列冻结右侧 */
#s-table { table-layout: fixed; width: 100%; min-width: 0; }
#s-table th, #s-table td { overflow: hidden; text-overflow: ellipsis; }
#s-table th:nth-child(1), #s-table td:nth-child(1) { width: 8%; }
#s-table th:nth-child(2), #s-table td:nth-child(2) { width: 24%; }
#s-table th:nth-child(3), #s-table td:nth-child(3) { width: 8%; }
#s-table th:nth-child(4), #s-table td:nth-child(4) { width: 14%; }
#s-table th:nth-child(5), #s-table td:nth-child(5) { width: 8%; }
#s-table th:nth-child(6), #s-table td:nth-child(6) { width: 12%; }
#s-table th:nth-child(7), #s-table td:nth-child(7) { width: 6%; }
#s-table th:nth-child(8), #s-table td:nth-child(8) { width: 160px; }
#s-table td.actions { display: table-cell; white-space: nowrap; }
#s-table td.actions .btn-sm { display: inline-block; padding: 3px 4px; font-size: 12px; white-space: nowrap; margin-right: 1px; }
#s-table thead th:last-child { position: sticky; right: 0; z-index: 2; }
#s-table td.actions { position: sticky; right: 0; background: var(--card); z-index: 1; box-shadow: -2px 0 6px rgba(0,0,0,.05); }
#s-table tr:hover td.actions { background: #fafbfc; }
.table .empty { text-align: center; padding: 30px; color: var(--text-2); }

/* 徽标/状态 */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.badge-ok { background: #e6f6ec; color: var(--success); }
.badge-warn { background: #fdf3e2; color: var(--warn); }
.badge-danger { background: #fdeaea; color: var(--danger); }
.badge-info { background: var(--primary-light); color: var(--primary); }

/* 单据明细行：库存不足标红，一眼可辨 */
tr.row-short { background: #fdeaea !important; }
tr.row-short .it-stock { color: var(--danger); font-weight: 700; }

/* 看板 */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.kpi .kpi-label { font-size: 12px; color: var(--text-2); }
.kpi .kpi-value { font-size: 22px; font-weight: 700; margin-top: 6px; }
.kpi .kpi-sub { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.kpi.warn .kpi-value { color: var(--danger); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 10px; }
.chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.chart .bar { width: 70%; max-width: 34px; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.chart .bar-label { font-size: 11px; color: var(--text-2); }
.chart .bar-val { font-size: 11px; color: var(--text); font-weight: 600; }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; display: flex;
  align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal { background: #fff; border-radius: 10px; width: 100%; max-width: 680px; box-shadow: 0 10px 40px rgba(0,0,0,.25); resize: horizontal; overflow: hidden; min-width: 420px; }
.modal.wide { max-width: 900px; }
.modal.xwide { max-width: 1280px; }
.modal.small { max-width: 420px; }
.modal-head { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.modal-close { border: none; background: none; font-size: 18px; color: var(--text-2); padding: 2px 6px; }
.modal-body { padding: 16px 18px; max-height: 70vh; overflow-y: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* 弹窗内标签页 */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.tabs .tab { padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--text-2); border-bottom: 2px solid transparent; user-select: none; }
.tabs .tab.active { color: var(--primary, #2563eb); border-bottom-color: var(--primary, #2563eb); font-weight: 600; }
.tab-pane { overflow: auto; }
.tab-pane table.table { min-width: 640px; }

/* Toast */
#toast-root { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #333; color: #fff; padding: 10px 18px; border-radius: 6px; font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); animation: fadeIn .2s; }
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* 明细行 */
.items-editor { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.items-editor .table { min-width: 520px; }
.items-editor .input { border: none; border-bottom: 1px dashed var(--border); border-radius: 0; padding: 4px; width: 100%; background: transparent; }
.items-editor .input:focus { box-shadow: none; border-color: var(--primary); }
.item-remove { color: var(--danger); background: none; border: none; font-size: 15px; padding: 2px 6px; }
.item-remove:hover { background: #fdeaea; border-radius: 4px; }

/* 移动端 */
@media (max-width: 768px) {
  .sidebar { position: fixed; top: 52px; bottom: 0; left: 0; z-index: 60; transform: translateX(-100%);
    transition: transform .2s; box-shadow: 2px 0 10px rgba(0,0,0,.1); overflow-y: auto; }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 12px; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .modal-mask { padding: 16px 8px; align-items: center; }
  .topbar-right .user-info { display: none; }
}

/* 打印/其他 */
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-primary { color: var(--primary); }
.text-bold { font-weight: 700; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.flex { display: flex; align-items: center; gap: 8px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
/* 合同待出库（欠货）区块 */
.pnd-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.pnd-card:last-child { margin-bottom: 0; }
.pnd-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 14px; flex-wrap: wrap; }
.pnd-sum { margin-left: auto; color: #555; font-size: 13px; }
.right { text-align: right; }
.gap8 { gap: 8px; }
.wrap { flex-wrap: wrap; }

/* ===== 出货单打印模板 ===== */
.modal.paper { max-width: 860px; }
.dn-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.dn-bar .hint { margin-right: auto; }

/* 产品标签打印预览：80mm×50mm 横向，顶部18mm预印LOGO区，内容从18mm以下开始；单列排列所见即所得 */
.lb-grid { display: grid; grid-template-columns: 80mm; gap: 4mm; max-height: 62vh; overflow: auto; justify-content: center; padding: 4px; }
.lb-card { width: 80mm; height: 50mm; box-sizing: border-box; border: 1.2px solid #999; padding: 18mm 3mm 1mm 3mm; border-radius: 1mm; font-family: 'Microsoft YaHei', sans-serif; background: #fff; display: flex; flex-direction: column; }
.lb-logo-space { display: none; }
.lb-card .lb-company { font-size: 10pt; font-weight: 700; text-align: center; margin-bottom: 1mm; white-space: nowrap; overflow: hidden; }
.lb-card .lb-row { font-size: 11pt; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-card .lb-label { display: inline-block; min-width: 13mm; }
.lb-card .lb-name { font-size: 12pt; font-weight: 700; }
.lb-card .lb-qty { font-size: 15pt; font-weight: 700; }
/* A4 纸张：内容区 180mm（A4 210mm 两边各留 15mm），打印 1:1 不缩放；高度随内容自适应 */
.dn-paper { background: #fff; border: 1px solid #d0d5dd; width: 180mm; box-sizing: border-box; padding: 20px 22px; font-size: 13px; color: #111; margin: 0 auto; }
/* 打印文档骨架：页眉（横线+LOGO）放入 thead，跨页时每页自动重复 */
.dn-doc { width: 100%; border-collapse: collapse; }
.dn-doc > thead > tr > td { vertical-align: top; padding: 0 0 10px; }
.dn-doc > tbody > tr > td { vertical-align: top; padding: 0; }
/* 简洁页眉：小 LOGO + 底部横线，往下留白 */
.dn-pagehead { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid #333; padding: 0 0 6px; margin-bottom: 4px; }
.dn-pagehead img { height: 9mm; width: auto; display: block; }
.dn-pagehead-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: #333; }
.dn-logo { display: block; margin: 0 0 10px; max-width: 230px; width: 100%; height: auto; }
.dn-sign td { position: relative; }
.dn-stamp { position: absolute; left: 140px; top: 4px; width: 90px; height: 90px; cursor: move; z-index: 5; user-select: none; -webkit-user-select: none; overflow: hidden; }
.dn-stamp img { width: 100%; height: 100%; display: block; }
.dn-items { table-layout: fixed; }
.dn-items th { position: relative; overflow: hidden; }
.dn-cres { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 4; user-select: none; -webkit-user-select: none; touch-action: none; }
.dn-cres:hover { background: rgba(24, 119, 242, 0.35); }
.dn-title { text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 6px; margin: 4px 0 14px; }
.dn-company { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.dn-input { border: none; border-bottom: 1px dashed #999; background: transparent; font-size: 13px; padding: 2px 4px; color: #111; min-width: 60px; }
.dn-company-input { font-weight: 600; min-width: 220px; }
.dn-address-input { flex: 1; min-width: 180px; }
.dn-info { width: 100%; border-collapse: collapse; margin: 14px 0; }
.dn-info td { padding: 3px 4px; vertical-align: top; }
.dn-right { text-align: right; }
.dn-items { width: 100%; border-collapse: collapse; }
.dn-items th, .dn-items td { border: 1px solid #333; padding: 5px 6px; text-align: center; }
.dn-items th { background: #f2f4f7; font-weight: 600; }
.dn-items td:first-child { width: 40px; }
.dn-items th:first-child { width: 40px; }
.dn-items td:nth-child(2), .dn-items th:nth-child(2) { width: 80px; }
.dn-items td:nth-child(3), .dn-items th:nth-child(3) { width: 90px; }
.dn-items td:nth-child(4), .dn-items th:nth-child(4) { width: auto; }
.dn-items td:nth-child(5), .dn-items th:nth-child(5) { width: auto; }
.dn-items td:nth-child(6), .dn-items th:nth-child(6) { width: 50px; }
.dn-items td:nth-child(7), .dn-items th:nth-child(7) { width: 70px; }
.dn-items td:nth-child(8), .dn-items th:nth-child(8) { width: 100px; }
.dn-items tfoot td { font-weight: 700; }
.dn-total-label { text-align: right !important; }
.dn-remark { margin: 10px 0; }
.dn-remark-input { width: 100%; }
.dn-note { margin: 8px 0; color: #555; font-size: 12px; }
.dn-print-tip { margin-top: 8px; padding: 6px 10px; background: #fff7e6; border: 1px solid #ffd591; border-radius: 6px; color: #ad6800; font-size: 12px; line-height: 1.6; }

/* ===== 可搜索下拉 ===== */
.ssel { position: relative; }
.ssel-input { width: 100%; }
.ssel-drop { position: absolute; top: 100%; left: 0; min-width: 460px; max-width: 640px; z-index: 9999; display: none; max-height: 300px; overflow: auto; background: #fff; border: 1px solid #d0d7de; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.18); margin-top: 2px; }
.ssel-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 13px; color: #333; white-space: normal; overflow-wrap: break-word; line-height: 1.45; border-bottom: 1px solid #f2f4f7; }
.ssel-tx { flex: 1; min-width: 0; }
.ssel-price { color: #888; font-size: 12px; white-space: nowrap; padding-top: 1px; }
.ssel-item:hover, .ssel-item.active { background: #e8f3ff; color: #1a66ff; }
.ssel-empty { padding: 8px 12px; color: #999; font-size: 13px; }
.ssel-keep { color: #1a66ff; }
.ssel-create { color: #1a66ff; font-weight: 600; border-top: 1px dashed #c8d5e3; }
.dn-clause { margin: 8px 0; line-height: 1.7; text-align: justify; }
.dn-contract-no { text-align: center; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.dn-sign { width: 100%; border-collapse: collapse; margin-top: 18px; }
.dn-sign td { padding: 6px 4px; }

/* ===== 出货单窄版（复写纸 140×215mm）===== */
.dn-paper-narrow { width: 140mm; max-width: 100%; margin: 0 auto; padding: 8mm; font-size: 12px; box-sizing: border-box; }
.dn-paper-narrow .dn-logo-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.dn-paper-narrow .dn-logo { display: block; max-width: 32mm; width: auto; height: auto; margin: 0; }
.dn-paper-narrow .dn-paper-head-right { font-size: 11px; color: #333; white-space: nowrap; }
.dn-paper-narrow .dn-title { font-size: 15px; letter-spacing: 4px; margin: 0 0 4px; }
.dn-paper-narrow .dn-company { font-size: 11px; gap: 6px; }
.dn-paper-narrow .dn-input { font-size: 11px; min-width: 40px; padding: 1px 3px; }
.dn-paper-narrow .dn-company-input { min-width: 130px; }
.dn-paper-narrow .dn-address-input { min-width: 110px; }
.dn-paper-narrow .dn-info { margin: 4px 0; font-size: 11px; }
.dn-paper-narrow .dn-info td { padding: 2px 3px; }
.dn-paper-narrow .dn-items { font-size: 11px; }
.dn-paper-narrow .dn-items th, .dn-paper-narrow .dn-items td { padding: 2px 3px; }
.dn-paper-narrow .dn-items td:first-child { width: 6%; }
.dn-paper-narrow .dn-items th:first-child { width: 6%; }
.dn-paper-narrow .dn-items td:nth-child(2), .dn-paper-narrow .dn-items th:nth-child(2) { width: 12%; }
.dn-paper-narrow .dn-items td:nth-child(3), .dn-paper-narrow .dn-items th:nth-child(3) { width: 13%; }
.dn-paper-narrow .dn-items td:nth-child(4), .dn-paper-narrow .dn-items th:nth-child(4) { width: 25%; }
.dn-paper-narrow .dn-items td:nth-child(5), .dn-paper-narrow .dn-items th:nth-child(5) { width: 21%; }
.dn-paper-narrow .dn-items td:nth-child(6), .dn-paper-narrow .dn-items th:nth-child(6) { width: 7%; }
.dn-paper-narrow .dn-items td:nth-child(7), .dn-paper-narrow .dn-items th:nth-child(7) { width: 16%; }
.dn-paper-narrow .dn-items td:nth-child(8), .dn-paper-narrow .dn-items th:nth-child(8) { width: 12%; }
.dn-paper-narrow .dn-remark { margin: 4px 0; font-size: 11px; }
.dn-paper-narrow .dn-remark-input { font-size: 11px; }
.dn-paper-narrow .dn-sign { margin-top: 6px; font-size: 11px; }
.dn-paper-narrow .dn-sign td { padding: 3px 2px; line-height: 1.6; }
.dn-total-row td { font-weight: 700; border-top: 1px solid #333; }

/* 骑缝章：多页打印时每页右缘印半枚章，翻页后右半枚拼成完整章；仅打印时显示 */
.dn-cross-r { display: none; }

/* 打印时只显示出货单 */
@media print {
  /* 只打印独立克隆层 #print-root，页面其余元素一律不占版面 */
  body > * { display: none !important; }
  #print-root { display: block !important; }
  .modal-head, .modal-foot, .dn-bar { display: none !important; }
  #print-root .dn-paper { border: none; padding: 0; }
  /* 页眉随 thead 每页重复；上方留白保证第二页起不顶头（LOGO 与横线整体下移） */
  #print-root .dn-doc > thead > tr > td { padding: 14mm 0 10px; }
  /* 明细表打印时与屏幕一致的固定列宽（用户可拖动调整），避免 auto 布局导致的乱换行 */
  #print-root .dn-items { table-layout: fixed; width: 100%; }
  #print-root .dn-company-input, #print-root .dn-input { border-bottom-color: #111; }
  /* 窄纸复写纸：精确纸张尺寸由 printPaper() 动态注入 @page */
  #print-root .dn-paper-narrow { width: 140mm; padding: 0; }
  /* 多行明细自动分页：每页重复表头，明细行不跨页拆断 */
  #print-root .dn-items thead { display: table-header-group; }
  #print-root .dn-items tr { page-break-inside: avoid; break-inside: avoid; }
  #print-root .dn-remark, #print-root .dn-sign { page-break-inside: avoid; break-inside: avoid; }
  /* 骑缝章：固定 90px 不随字体缩放；每页右缘显示章的右半（45px），翻页拼成完整章 */
  #print-root .dn-cross-r {
    display: block; position: fixed; right: 0; top: 40%; width: 45px; height: 90px; overflow: hidden; z-index: 99;
    pointer-events: none;
  }
  #print-root .dn-cross-r img { width: 90px; height: 90px; max-width: none; position: absolute; right: 0; top: 0; }
}