* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #f0f2f5; color: #333; }

.topbar { background: #1f4e79; color: #fff; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.topbar h1 { font-size: 20px; margin-right: auto; }
.nav-btn { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 7px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.nav-btn.active { background: #fff; color: #1f4e79; font-weight: bold; }

.view { display: none; max-width: 1000px; margin: 20px auto; padding: 0 16px; }
.view.active { display: block; }

.card { background: #fff; border-radius: 8px; padding: 20px 24px; margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.card h2 { font-size: 16px; color: #1f4e79; border-left: 4px solid #1f4e79; padding-left: 8px; margin-bottom: 16px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px 20px; }
.grid label { display: flex; flex-direction: column; font-size: 14px; gap: 4px; }
.grid .span2 { grid-column: span 2; }
.grid .span3 { grid-column: span 3; }

input, select, textarea { border: 1px solid #c9d3de; border-radius: 4px; padding: 8px 10px; font-size: 14px; font-family: inherit; }
input:focus, select:focus { outline: none; border-color: #1f4e79; }
input[readonly] { background: #f5f7fa; }
input.invalid, select.invalid { border-color: #e02e2e; background: #fff5f5; }

.req::before { content: "* "; color: #e02e2e; }
fieldset { border: 1px solid #dde4ec; border-radius: 4px; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
fieldset legend { font-size: 14px; padding: 0 4px; }
.inline { display: inline-flex; align-items: center; gap: 4px; font-weight: normal; }
.inline input { width: auto; }

.form-row-full { margin-top: 16px; }
.form-row-full .lbl { display: block; font-size: 14px; margin-bottom: 8px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 18px; border: 1px solid #dde4ec; border-radius: 4px; padding: 12px; }
.checkbox-group .inline { font-size: 14px; }
.param-basis { color: #8a97a5; font-size: 12px; margin-left: 4px; }

.hint { color: #8a97a5; font-size: 13px; }
.actions { display: flex; gap: 12px; justify-content: flex-end; margin: 8px 0 30px; }
.actions.left { justify-content: flex-start; }
button { border: 1px solid #c9d3de; background: #fff; border-radius: 4px; padding: 9px 22px; font-size: 14px; cursor: pointer; }
button.primary { background: #1f4e79; color: #fff; border-color: #1f4e79; }
button.primary:hover { background: #2a6299; }
button.danger { color: #e02e2e; border-color: #e02e2e; }
.btn-file { display: inline-block; border: 1px solid #c9d3de; border-radius: 4px; padding: 9px 22px; font-size: 14px; cursor: pointer; background: #fff; }

.list-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.list-table th, .list-table td { border: 1px solid #dde4ec; padding: 8px 10px; text-align: left; }
.list-table th { background: #f5f7fa; }

/* ---------- 用户栏 / 状态徽标 / 筛选 / 通知 ---------- */
.user-bar { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.user-bar .mini-btn { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.4); }

.badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.st-draft { background: #eef1f5; color: #66727f; }
.st-submitted { background: #e8f1fb; color: #1f4e79; }
.st-approved { background: #e8f7ee; color: #1e7e45; }
.st-rejected { background: #fdeeee; color: #c0392b; }
.reject-reason { color: #c0392b; font-size: 12px; margin-top: 4px; max-width: 240px; }

.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter-tabs button { padding: 5px 16px; font-size: 13px; border-radius: 16px; background: #fff; border-color: #c9d3de; }
.filter-tabs button.active { background: #1f4e79; color: #fff; border-color: #1f4e79; }

.notice { background: #fdeeee; color: #c0392b; border: 1px solid #f2c4c4; border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.notice.info { background: #e8f1fb; color: #1f4e79; border-color: #bcd4ec; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.user-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; align-items: end; }
.user-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* ---------- 材料库管理 ---------- */
.mat-cat { border: 1px solid #dde4ec; border-radius: 6px; margin: 14px 0; }
.mat-cat > .cat-head { background: #f5f7fa; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mat-cat .cat-head b { min-width: 60px; }
.mat-body { padding: 10px 14px; }
.mat-cat > .mat-body:empty { padding: 0; }

.mat-item { border: 1px solid #dde4ec; border-radius: 6px; margin: 8px 0; background: #fff; }
.mat-item.expanded { border-color: #1f4e79; }
.mat-item .mi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; user-select: none; }
.mat-item .mi-head:hover { background: #f7fafd; }
.mat-item .mi-arrow { color: #1f4e79; width: 14px; }
.mat-item .mi-head b { flex: 1; min-width: 100px; }
.mi-sum { color: #8a97a5; font-size: 12px; white-space: nowrap; }
.mi-body { padding: 4px 14px 14px; border-top: 1px dashed #dde4ec; }
.mi-sec { margin-top: 12px; }
.mi-lbl { display: block; font-size: 13px; font-weight: bold; color: #1f4e79; margin-bottom: 6px; }
.mi-sec textarea { width: 100%; }
.p-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 6px 0; }
.p-row.std { grid-template-columns: 1fr 1.6fr 1.6fr auto; }
.p-row input { padding: 7px 9px; font-size: 13px; }
.mi-actions { margin-top: 14px; text-align: right; }
.mini-btn { padding: 4px 12px; font-size: 13px; }

/* ---------- 预览弹窗 ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; overflow: auto; }
.modal-body { background: #fff; max-width: 850px; margin: 20px auto; border-radius: 6px; padding: 16px; }
.modal-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }

/* ---------- A4 委托单（精确复刻 AXJZK-Ⅱ-10.08 Word 模板）---------- */
.wt-page { width: 794px; height: 1123px; background: #fff; padding: 75px 40px 0 47px; margin: 0 auto; position: relative;
  font-family: "宋体", SimSun, serif; overflow: hidden; }
.wt-header { text-align: center; font-family: "楷体", KaiTi, serif; font-size: 16px; line-height: 24px; }
.wt-title { text-align: center; font-family: "黑体", SimHei, sans-serif; font-size: 24px; line-height: 36px; margin-top: 6px; }
.wt-code { font-size: 14px; font-weight: bold; line-height: 21px; margin: 2px 0 2px 8px; }

.wt-sheet { width: 707px; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.wt-sheet td { border: 1px solid #000; font-size: inherit; line-height: 1.2; padding: 0 4px;
  vertical-align: middle; word-break: break-all; }
.wt-sheet td.label { font-weight: bold; text-align: center; white-space: normal; }
.wt-sheet td.center { text-align: center; }
.wt-sheet .cell-lines { text-align: center; }
.wt-sheet .cell-lines > div { line-height: 1.3; }
.wt-sheet td.basis { line-height: 1.3; }
.wt-sheet .blank { text-decoration: underline; min-width: 48px; display: inline-block; }

#toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #1f4e79; color: #fff; padding: 10px 22px; border-radius: 4px; z-index: 200; font-size: 14px; }

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; }
  body > *:not(#previewModal) { display: none !important; }
  body { overflow: visible !important; }
  #previewModal { position: static !important; overflow: visible !important; background: #fff; padding: 0; }
  #previewModal .modal-body { max-width: none; margin: 0; border-radius: 0; padding: 0; box-shadow: none; }
  .no-print { display: none !important; }
  .wt-page { width: 210mm; height: 296.5mm; margin: 0; }
  body.print-blocked #previewArea { display: none !important; }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .grid .span2, .grid .span3 { grid-column: span 1; }
  .actions { flex-wrap: wrap; }
}