/* ===== 订单大包上传 · 第一页样式 ===== */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  background: #f4f2ee; color: #2f2b25; font-size: 14px; line-height: 1.65;
}
a { color: #a0794f; }

/* ---- 顶栏 ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; background: #fff; border-bottom: 1px solid #e7e2d8;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.topbar .brand { font-weight: 700; font-size: 16px; color: #6b4f2a; white-space: nowrap; }
.topbar .spacer { flex: 1; }
.topbar select, .topbar .who {
  font-size: 13px; padding: 5px 8px; border: 1px solid #d8d2c6; border-radius: 6px;
  background: #fff; color: #2f2b25; cursor: pointer;
}
.topbar .who { cursor: default; background: #faf8f4; }
.navlink {
  font-size: 13px; padding: 5px 12px; border: 1px solid #d8d2c6; border-radius: 6px;
  background: #fff; color: #6b4f2a; cursor: pointer; text-decoration: none;
}
.navlink.active { background: #a0794f; color: #fff; border-color: #a0794f; }
.navlink:hover { border-color: #a0794f; }

/* ---- 双栏布局 ---- */
/* 左列 = 上传区 + 待处理队列（宽，主操作区，冻结）；
   右列 = 已上传文件（窄，紧凑列表，可滚动） */
.layout { display: flex; gap: 26px; padding: 26px 30px; align-items: flex-start; }
.col-left {
  flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 54px;
  max-height: calc(100vh - 78px); overflow-y: auto;
}
.col-right { flex: 0 0 40%; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }
@media (max-width: 1000px) {
  .layout { flex-direction: column; padding: 18px; gap: 18px; }
  .col-left, .col-right { width: 100%; flex: none; position: static; max-height: none; }
}

/* ---- 卡片 ---- */
.card { background: #fff; border: 1px solid #e7e2d8; border-radius: 10px; padding: 24px 26px; }
.card + .card { margin-top: 0; }
.card h3 { margin: 0 0 12px; font-size: 15px; color: #6b4f2a; display: flex; align-items: baseline; gap: 8px; }
.card h3 .count { margin-left: auto; font-weight: 400; font-size: 11px; color: #a59f93; }

/* ---- 上传区 ---- */
#drop {
  border: 2px dashed #c9c4ba; border-radius: 10px; padding: 52px 24px; text-align: center;
  color: #8a857b; cursor: pointer; transition: .15s; background: #fcfbf9;
}
#drop.over { border-color: #a0794f; background: #f6efe4; color: #6b4f2a; }
#drop .big { font-size: 15px; margin-bottom: 6px; }
#drop .sub { font-size: 12px; color: #a59f93; }

.queue-actions { display: flex; gap: 8px; margin-top: 14px; }
.btn {
  font-size: 13px; padding: 8px 14px; border-radius: 7px; border: 1px solid #d8d2c6;
  background: #fff; color: #2f2b25; cursor: pointer;
  display: inline-block; text-decoration: none; line-height: 1.2; white-space: nowrap;
}
a.btn { color: #2f2b25; }
a.btn.primary { color: #fff; }
.btn:hover { border-color: #a0794f; }
.btn.primary { background: #a0794f; color: #fff; border-color: #a0794f; }
.btn.primary:hover { background: #8a673f; }
.btn.primary:disabled { background: #cfc4b2; border-color: #cfc4b2; cursor: not-allowed; }
.btn.ghost { background: transparent; }
.btn.danger { color: #d9534f; border-color: #e7b7b5; }
.btn.danger:hover { background: #fbeaea; }
.btn.sm { padding: 4px 9px; font-size: 12px; }

.hint { font-size: 12px; color: #a59f93; margin-top: 14px; line-height: 1.7; }

/* ---- 筛选 / 排序条 ---- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar select, .toolbar label { font-size: 12px; }
.toolbar select { padding: 5px 8px; border: 1px solid #d8d2c6; border-radius: 6px; background: #fff; }
.toolbar .chk { display: inline-flex; align-items: center; gap: 5px; color: #6b6256; cursor: pointer; user-select: none; }
.toolbar .count { margin-left: auto; color: #a59f93; font-size: 12px; }
/* 窄列（待处理队列）里的紧凑筛选条 */
.toolbar.compact { gap: 6px; margin-bottom: 10px; }
.toolbar.compact select { font-size: 11px; padding: 3px 5px; max-width: 118px; }
.toolbar.compact .chk { font-size: 11px; }

/* ---- 包列表 ---- */
.pkg {
  background: #fff; border: 1px solid #e7e2d8; border-radius: 10px; padding: 18px 20px;
  margin-bottom: 18px; transition: .15s;
}
.pkg:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.pkg.blocked { border-color: #e7908c; background: #fdf3f2; }
.pkg.done { border-color: #bfe0c6; }
.pkg.uploading { border-color: #d9c9a6; }
.pkg-head { display: flex; align-items: center; gap: 10px; }
.pkg-name { font-weight: 600; word-break: break-all; flex: 1; min-width: 0; }
.pkg-size { color: #a59f93; font-size: 12px; white-space: nowrap; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.badge.pending { background: #eef0f2; color: #5a6470; }
.badge.blocked { background: #f6d6d4; color: #b23b35; }
.badge.uploading { background: #f6eddc; color: #8a673f; }
.badge.done { background: #dcefdf; color: #2f7d45; }
.badge.error { background: #f8dada; color: #c0392b; }
.badge.analyzing { background: #e6eef7; color: #3a6ea5; }

.pkg-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; font-size: 12px; color: #6b6256; }
.pkg-meta b { color: #2f2b25; font-weight: 600; }
.kpis { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
.kpi { text-align: center; }
.kpi .v { font-size: 16px; font-weight: 700; color: #6b4f2a; }
.kpi .l { font-size: 11px; color: #a59f93; }
.kpi.warn .v { color: #c98a00; }
.kpi.bad .v { color: #c0392b; }

/* 主数据摘要行（替代 4 方块 KPI：件数/PCS 大字主显，产能/金额弱化） */
.pkg-stats { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin: 8px 0 2px; }
.pkg-stats .stat-main { font-size: 13px; color: #a59f93; }
.pkg-stats .stat-main b { font-size: 17px; color: #2f2b25; font-weight: 700; margin-left: 3px; }
.pkg-stats .stat-dot { color: #d8d2c6; margin: 0 4px; }
.pkg-stats .stat-sub { margin-left: 16px; font-size: 12px; color: #a59f93; }
.pkg-stats .stat-sub.warn { color: #c98a00; }

/* 元信息行（muted 小字，日期/平台/工艺/大小等，弱化降级） */
.pkg-info { font-size: 11px; color: #a59f93; margin: 2px 0 0; line-height: 1.6; word-break: break-all; }

/* 已上传卡片：与待处理统一风格，去掉旧的内联 style */
.pkg.up-card { padding: 14px 18px; }

.pkg-warn { font-size: 12px; color: #b23b35; background: #fbeaea; border: 1px solid #f1c4c1;
  border-radius: 6px; padding: 7px 10px; margin: 8px 0; }
.pkg-warn .fix { color: #a0794f; text-decoration: underline; cursor: pointer; margin-left: 6px; }

.pkg-err { font-size: 12px; color: #c0392b; margin: 6px 0; }

.pkg-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pkg-foot .spacer { flex: 1; }

/* 可折叠详情（日志/回执/错误信息） */
.pkg-detail { margin-top: 6px; display: none; }
.pkg-detail.open { display: block; }
.toggle-detail-btn {
  font-size: 11px; padding: 2px 8px; border-radius: 5px;
  background: #f7f3ec; color: #8a857b; cursor: pointer; border: 1px solid #e7e2d8;
  line-height: 1.6; transition: .15s;
}
.toggle-detail-btn:hover { background: #f0e6d6; color: #6b4f2a; }

/* 进度条 */
.progress { height: 7px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; width: 0; background: #a0794f; transition: width .15s; }
.progress.done > i { background: #2f7d45; }
.pkg-pct { font-size: 11px; color: #a59f93; margin-left: 6px; font-weight: 600; }
.progress.done > i { background: #3f9d5a; }

/* 空状态 */
.empty { text-align: center; color: #a59f93; padding: 50px 20px; }

/* ===== 弹窗（登录 / 核货单 / 控制台） ===== */
.overlay {
  position: fixed; inset: 0; background: rgba(40,34,26,.45); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 420px; padding: 22px 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25); max-height: 90vh; overflow: auto;
}
.modal.wide { max-width: 640px; }
.modal h2 { margin: 0 0 4px; font-size: 18px; color: #6b4f2a; }
.modal .desc { color: #8a857b; font-size: 13px; margin: 0 0 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; margin-bottom: 5px; color: #5a544a; }
.field input, .field select {
  width: 100%; padding: 9px 10px; border: 1px solid #d8d2c6; border-radius: 7px; font-size: 14px;
}
.field input:focus, .field select:focus { outline: none; border-color: #a0794f; }
.modal .row { display: flex; gap: 10px; }
.modal .err { color: #c0392b; font-size: 13px; min-height: 18px; margin-bottom: 8px; }
.modal .foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.linkbtn { background: none; border: none; color: #a0794f; cursor: pointer; font-size: 13px; text-decoration: underline; }
.divider { height: 1px; background: #eee; margin: 16px 0; }

/* 核货单 PDF 查看器 */
.pdf-modal { max-width: 92vw; width: 880px; }
.pdf-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pdf-bar .pg { font-size: 13px; color: #5a544a; }
.pdf-scroll { max-height: 72vh; overflow: auto; background: #525659; border-radius: 8px; padding: 12px; text-align: center; }
.pdf-scroll canvas { max-width: 100%; height: auto; box-shadow: 0 2px 12px rgba(0,0,0,.4); margin: 0 auto; display: block; }
.pdf-loading { color: #ddd; padding: 40px; text-align: center; }

/* 控制台 */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.admin-grid .box { border: 1px solid #e7e2d8; border-radius: 8px; padding: 12px; }
.admin-grid .box h4 { margin: 0 0 8px; font-size: 13px; color: #6b4f2a; }
.admin-grid table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-grid td, .admin-grid th { border: 1px solid #eee; padding: 4px 6px; text-align: left; }
.tag { display: inline-block; background: #f0ece4; border-radius: 4px; padding: 1px 6px; margin: 2px; font-size: 12px; }
.staff-edit input { width: 100%; padding: 5px 7px; border: 1px solid #d8d2c6; border-radius: 5px; margin-top: 4px; }

/* ===== 第二页：明细/查看 ===== */
.toolbar .search, .toolbar select { font-size: 13px; padding: 6px 9px; border: 1px solid #d8d2c6; border-radius: 6px; background: #fff; }
.toolbar .search { min-width: 180px; }
.kpis.big { margin: 12px 0; }
.kpis.big .kpi .v { font-size: 22px; }
.badge.dept { background: #6b4f2a; color: #fff; border: none; }
.det-body { padding: 4px 2px; }
.det-body h4 { margin: 16px 0 8px; font-size: 14px; color: #6b4f2a; }
.det-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; table-layout: fixed; }
.det-table th, .det-table td { border: 1px solid #ece8df; padding: 7px 9px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.det-table th { background: #f7f3ec; color: #6b4f2a; font-weight: 600; }
.det-table td.fn { word-break: break-all; color: #555; }
.det-table th:nth-child(1), .det-table td:nth-child(1) { width: 38%; }
.det-table th:nth-child(2), .det-table td:nth-child(2) { width: 16%; }
.thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.thumb { width: 150px; border: 1px solid #e7e2d8; border-radius: 8px; overflow: hidden; background: #fff; }
.thumb-cv { height: 200px; display: flex; align-items: center; justify-content: center; background: #3b3b3b; overflow: hidden; }
.thumb-cv canvas { max-width: 100%; max-height: 100%; }
.thumb-name { font-size: 11px; padding: 5px 6px; color: #555; word-break: break-all; max-height: 34px; overflow: hidden; }
.thumb-pages { font-size: 11px; color: #a0794f; text-align: center; padding-bottom: 4px; }
.muted { color: #a59f93; font-size: 12px; }
.empty { color: #9a948a; padding: 50px 20px; text-align: center; line-height: 1.8; }
.empty.sm { padding: 22px 12px; font-size: 12px; line-height: 1.7; }

/* ===== 第二页：三区布局（增强版 v2） ===== */
.layout2 { display: flex; gap: 0; min-height: calc(100vh - 54px); }
.side-col { flex: 0 0 300px; border-right: 1px solid #e7e2d8; background: #faf8f4; display: flex; flex-direction: column; }
.side-col .toolbar { padding: 12px; border-bottom: 1px solid #e7e2d8; }
.side-col .search { width: 100%; min-width: 0; }
.side-scroll { flex: 1; overflow-y: auto; padding: 10px; max-height: calc(100vh - 120px); }
.side-item { background: #fff; border: 1px solid #e7e2d8; border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; transition: .15s; }
.side-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); border-color: #a0794f; }
.side-item.active { border-color: #a0794f; background: #f6efe4; }
.side-name { font-weight: 600; word-break: break-all; line-height: 1.4; }
.side-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 11px; color: #a59f93; }
.side-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 去掉固定高度比例，改为自然流式布局，方便滚动查看明细 */
.detail-top { display: flex; min-height: 360px; max-height: 520px; border-bottom: 1px solid #e7e2d8; }
.file-list-pane { flex: 0 0 320px; border-right: 1px solid #e7e2d8; overflow-y: auto; background: #fff; }
.preview-pane { flex: 1; overflow-y: auto; background: #2a2a2a; display: flex; flex-direction: column; }
.detail-bottom { overflow-y: visible; padding: 16px; background: #f4f2ee; }

/* 文件列表（支持文件夹层级） */
.filelist-head { background: #faf8f4; padding: 10px 12px 8px; font-size: 13px; font-weight: 600; color: #6b4f2a; border-bottom: 1px solid #e7e2d8; }
.filelist-scroll { padding: 6px; }
/* 文件夹行 */
.fl-folder { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 12px; font-weight: 600; color: #6b4f2a; background: #f7f3ec; border-radius: 4px; margin: 3px 0; }
.fl-folder-icon { font-size: 14px; flex-shrink: 0; }
.fl-folder-count { margin-left: auto; font-size: 10px; color: #a59f93; background: #efe7d8; padding: 1px 7px; border-radius: 10px; }
/* 文件行 */
.fileline { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: default; font-size: 12.5px; }
.fileline.pv { cursor: pointer; }
.fileline.pv:hover { background: #f6efe4; }
.fileline.active { background: #f0e6d6; box-shadow: inset 0 0 0 1px #a0794f; }
.fl-indent-line { width: 12px; height: 1px; background: #ddd; flex-shrink: 0; }
.fl-name { flex: 1; min-width: 0; word-break: break-all; color: #3a352e; font-size: 12px; }
.fl-tag { flex: 0 0 auto; font-size: 10px; padding: 1px 6px; background: #efe7d8; color: #6b4f2a; border-radius: 8px; }
.fl-size { flex: 0 0 auto; color: #a59f93; font-size: 11px; }

/* ===== 预览窗（增强版） ===== */
.pv-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: #333; border-bottom: 1px solid #444;
  flex-shrink: 0;
}
.pv-filename { font-size: 12px; color: #ccc; font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-tb-btn {
  font-size: 13px; width: 28px; height: 28px; border-radius: 5px;
  border: 1px solid #555; background: #444; color: #ddd; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; transition: .15s;
}
.pv-tb-btn:hover { background: #555; border-color: #888; color: #fff; }

.pv-viewport {
  flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center;
  background: #2a2a2a; position: relative;
}
.pv-viewport.pv-img-mode { justify-content: center; }
.pv-canvas-wrap { display: flex; flex-direction: column; align-items: center; padding: 10px; min-height: 100%; }
.pv-canvas { box-shadow: 0 2px 16px rgba(0,0,0,.5); border-radius: 2px; background: #fff; }
.pv-image { max-width: 95%; max-height: calc(100vh - 200px); object-fit: contain; box-shadow: 0 4px 20px rgba(0,0,0,.4); border-radius: 4px; transition: transform .2s ease; }

.pv-loading, .pv-empty { color: #999; padding: 40px 20px; text-align: center; font-size: 13px; }
.pv-empty { color: #777; line-height: 1.8; }

.pv-zoom-label {
  position: absolute; bottom: 8px; right: 12px;
  font-size: 11px; color: #888; background: rgba(0,0,0,.5);
  padding: 2px 8px; border-radius: 4px; pointer-events: none;
}

/* 页码导航 */
.pv-page-nav {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px; background: #333; border-top: 1px solid #444; flex-shrink: 0;
  font-size: 12px; color: #ccc;
}
.pv-page-nav .pv-tb-btn { width: auto; padding: 2px 10px; font-size: 12px; }
.pv-chk { display: inline-flex; align-items: center; gap: 4px; color: #aaa; cursor: pointer; font-size: 11px; user-select: none; }
.pv-chk input { accent-color: #a0794f; }

/* 全屏弹窗（预览窗专用） */
.pv-fullscreen-modal { max-width: 96vw; width: 960px; }
.pv-fullscreen-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #fff; border-radius: 8px 8px 0 0;
}
.pv-fullscreen-bar b { font-size: 14px; color: #2f2b25; }
.pv-fullscreen-bar .pg { font-size: 13px; color: #5a544a; }
.pv-fullscreen-scroll {
  max-height: 80vh; overflow: auto; background: #525659; border-radius: 0 0 8px 8px; padding: 16px; text-align: center;
}
.pv-fullscreen-scroll canvas { max-width: 100%; height: auto; box-shadow: 0 2px 12px rgba(0,0,0,.4); margin: 6px auto; display: block; }
.pv-fullscreen-imgwrap { background: #2a2a2a; border-radius: 0 0 8px 8px; padding: 20px; text-align: center; max-height: 85vh; overflow: auto; }
.pv-fullscreen-img { max-width: 100%; max-height: 80vh; object-fit: contain; }

/* ---- 已上传文件（平台分组） ---- */
.up-group { margin-bottom: 16px; }
.up-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: linear-gradient(135deg, #f6efe4, #faf8f4);
  border: 1px solid #e7e2d8; border-radius: 8px 8px 0 0;
  font-size: 13px;
}
.up-group-name { font-weight: 700; color: #6b4f2a; }
.up-group-count { font-size: 11px; color: #a59f93; margin-left: auto; }
.up-group .pkg { border-radius: 0; border-top: none; }
.up-group .pkg:first-of-type { border-radius: 0 0 8px 8px; border-top: 1px solid #e7e2d8; }

/* ===== 管理员控制台：部门口令（每部门两个） ===== */
.pw-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pw-row b { flex: 0 0 92px; font-size: 13px; color: #6b4f2a; }
.pw-input {
  flex: 1; min-width: 150px; padding: 6px 8px;
  border: 1px solid #d8d2c6; border-radius: 6px; font-size: 13px; background: #fff;
}
.pw-input:focus { outline: none; border-color: #a0794f; }
.box { border: 1px solid #e7e2d8; border-radius: 8px; padding: 12px; }
.box h4 { margin: 0 0 8px; font-size: 13px; color: #6b4f2a; }

/* ===== 第三页：数据调参 ===== */
.data-section { margin-bottom: 24px; }
.data-section-title { font-size: 15px; color: #6b4f2a; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.data-edit-table input.data-input {
  width: 80px; padding: 4px 6px; border: 1px solid #d8d2c6; border-radius: 5px;
  font-size: 13px; text-align: right; background: #fff;
}
.data-edit-table input.data-input:focus { outline: none; border-color: #a0794f; box-shadow: 0 0 0 2px rgba(160,121,79,.15); }
.data-edit-table .data-orig { font-size: 11px; color: #a59f93; margin-left: 6px; }
.data-edit-table tr.row-changed { background: #fff8e6; }
.data-edit-table tr.row-changed td { border-color: #f0dca0; }

.data-summary { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #faf8f4; border: 1px solid #e7e2d8; border-radius: 8px; margin-bottom: 16px; font-size: 13px; color: #6b6256; flex-wrap: wrap; }
.changed-badge { background: #c0392b; color: #fff; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }

/* 联动演示 */
.demo-card { background: #f7f3ec; border: 1px solid #e7e2d8; border-radius: 10px; padding: 16px 20px; max-width: 600px; }
.demo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.demo-row label { width: 60px; font-size: 13px; color: #5a544a; flex-shrink: 0; }
.demo-row select, .demo-row input { flex: 1; padding: 6px 9px; border: 1px solid #d8d2c6; border-radius: 6px; font-size: 13px; background: #fff; }
.demo-result { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e7e2d8; }