/* 与 test1.html 完全一致的样式 - 作业归档报告 */
/* 不使用外部字体（内网环境无法访问 Google Fonts），使用系统/本地中文字体栈 */
.work-job-archive-report {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  background-color: #52525b;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 顶部操作栏 - 与 test1 一致 */
.work-job-archive-report .archive-toolbar {
  width: 210mm;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
.work-job-archive-report .archive-toolbar h2 {
  font-weight: 500;
}
.work-job-archive-report .archive-toolbar .print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.work-job-archive-report .archive-toolbar .print-btn:hover {
  background-color: #3b82f6;
}
.work-job-archive-report .archive-toolbar .archive-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.work-job-archive-report .archive-toolbar .export-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.work-job-archive-report .archive-toolbar .export-pdf-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: white;
}
.work-job-archive-report .archive-toolbar .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.work-job-archive-report .archive-toolbar .back-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: white;
}

/* 纸张容器：宽度 210mm（A4），仅在小视口下按宽度缩放，最大 1:1 不放大，避免流程图箭头错位与横向溢出 */
.work-job-archive-report .archive-pages-wrap {
  width: 210mm;
  margin-left: auto;
  margin-right: auto;
  transform-origin: top center;
}
@media (min-width: 850px) {
  .work-job-archive-report .archive-pages-wrap {
    transform: scale(min(calc((100vw - 2rem) / 794px), 1));
  }
}

/* 通用纸张样式 - 与 test1 .page-sheet 完全一致 */
.work-job-archive-report .page-sheet {
  background: white;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 20px auto;
  position: relative;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  box-sizing: border-box;
}

/* 打印时分页控制 - 仅打印两页，避免多出空白页；不缩放，保持 A4 */
@media print {
  html, body, #root, #root > * {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .work-job-archive-report {
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .work-job-archive-report .no-print {
    display: none !important;
  }
  .work-job-archive-report .archive-pages-wrap {
    transform: none !important;
  }
  .work-job-archive-report .page-sheet {
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always;
    width: 100% !important;
  }
  .work-job-archive-report .page-sheet:last-child,
  .work-job-archive-report .page-sheet.page-2 {
    page-break-after: auto !important;
  }
}

/* 水印 - 与 test1 .watermark-bg 完全一致 */
.work-job-archive-report .watermark-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='20' fill='%23f3f4f6' transform='rotate(-45 200 200)' text-anchor='middle'%3E内部归档 INTERNAL ONLY%3C/text%3E%3C/svg%3E");
}

/* 流程图容器 - 与 test1 .flow-container 完全一致 */
.work-job-archive-report .flow-container {
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 模拟 React Flow 节点 - 与 test1 .rf-node 完全一致 */
.work-job-archive-report .rf-node {
  position: absolute;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  font-size: 12px;
  width: 120px;
  text-align: center;
  z-index: 10;
  box-sizing: border-box;
}
.work-job-archive-report .rf-node.active {
  border-color: #3b82f6;
  background-color: #eff6ff;
  color: #1d4ed8;
}
.work-job-archive-report .rf-node.success {
  border-color: #22c55e;
  color: #15803d;
}

/* 模拟连线 - 与 test1 .rf-lines 完全一致 */
.work-job-archive-report .rf-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ========== 第 1 页内容样式（与 test1 一致） ========== */
.work-job-archive-report .page-sheet.page-1 {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
}
.work-job-archive-report .page-1 .top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #1e293b;
}
.work-job-archive-report .page-1 .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.work-job-archive-report .page-1 .page-header h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.work-job-archive-report .page-1 .page-header .subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}
.work-job-archive-report .page-1 .page-header .doc-no-wrap {
  text-align: right;
}
.work-job-archive-report .page-1 .page-header .doc-no-label {
  font-size: 0.75rem;
  color: #94a3b8;
}
.work-job-archive-report .page-1 .page-header .doc-no {
  font-family: ui-monospace, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  color: #334155;
}
.work-job-archive-report .page-1 .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.work-job-archive-report .page-1 .info-box {
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  padding: 1.25rem;
  background-color: rgba(248, 250, 252, 0.5);
}
.work-job-archive-report .page-1 .info-box h3 {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
}
.work-job-archive-report .page-1 .info-box .info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.work-job-archive-report .page-1 .info-box .info-row:last-child {
  margin-bottom: 0;
}
.work-job-archive-report .page-1 .info-box .info-label {
  color: #64748b;
  font-size: 0.875rem;
}
.work-job-archive-report .page-1 .info-box .info-value {
  font-weight: 500;
  color: #1e293b;
  font-size: 0.875rem;
}
.work-job-archive-report .page-1 .conclusion-status {
  font-size: 1.875rem;
  font-weight: 700;
  color: #16a34a;
}
.work-job-archive-report .page-1 .conclusion-badge {
  padding: 0.25rem 0.5rem;
  background-color: #dcfce7;
  color: #15803d;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid #bbf7d0;
}
.work-job-archive-report .page-1 .conclusion-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.work-job-archive-report .page-1 .conclusion-desc {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}
.work-job-archive-report .page-1 .section {
  margin-bottom: 2rem;
}
.work-job-archive-report .page-1 .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.work-job-archive-report .page-1 .section-title {
  font-weight: 700;
  color: #334155;
  border-left: 4px solid #1e293b;
  padding-left: 0.75rem;
  margin: 0;
}
.work-job-archive-report .page-1 .section-note {
  font-size: 0.75rem;
  color: #94a3b8;
}
/* 流程执行摘要 - 横向步骤条（带连线、已完成/进行中/待处理） */
.work-job-archive-report .page-1 .summary-bar.summary-steps {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 1.5rem 0.75rem;
}
.work-job-archive-report .page-1 .summary-bar .summary-grid {
  display: grid;
  grid-template-columns: minmax(36px, 1fr) 1fr minmax(36px, 1fr) 1fr minmax(36px, 1fr) 1fr minmax(36px, 1fr) 1fr minmax(36px, 1fr) 1fr minmax(36px, 1fr) 1fr minmax(36px, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.25rem 0;
}
.work-job-archive-report .page-1 .summary-bar .summary-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  justify-self: center;
}
.work-job-archive-report .page-1 .summary-bar .summary-step-icon.summary-step-icon-active {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}
.work-job-archive-report .page-1 .summary-bar .summary-connector {
  height: 2px;
  align-self: center;
  justify-self: stretch;
}
.work-job-archive-report .page-1 .summary-bar .summary-connector-done {
  background-color: #93c5fd;
}
.work-job-archive-report .page-1 .summary-bar .summary-connector-pending {
  background-color: #e5e7eb;
}
.work-job-archive-report .page-1 .summary-bar .summary-step-done {
  background-color: #22c55e;
  color: white;
}
.work-job-archive-report .page-1 .summary-bar .summary-step-active {
  background-color: #3b82f6;
  color: white;
}
.work-job-archive-report .page-1 .summary-bar .summary-step-pending {
  background-color: white;
  border: 1.5px solid #d1d5db;
  color: #9ca3af;
}
.work-job-archive-report .page-1 .summary-bar .summary-step-pending .summary-step-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #9ca3af;
}
.work-job-archive-report .page-1 .summary-bar .summary-label-cell {
  grid-row: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}
.work-job-archive-report .page-1 .summary-bar .summary-step-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #1f2937;
  white-space: nowrap;
}
.work-job-archive-report .page-1 .summary-bar .summary-step-time {
  font-size: 0.6875rem;
  color: #9ca3af;
}
.work-job-archive-report .page-1 .summary-bar .summary-step-detail {
  font-size: 0.6875rem;
  color: #2563eb;
}
.work-job-archive-report .page-1 .summary-footnote {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  color: #94a3b8;
  text-align: right;
}
.work-job-archive-report .page-1 .record-section {
  flex: 1;
}
/* 归档流水日志 - 标题（左侧竖条 + 中文 / 英文） */
.work-job-archive-report .page-1 .record-log-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.work-job-archive-report .page-1 .record-log-title-bar {
  width: 4px;
  height: 1.125rem;
  background-color: #1e293b;
  border-radius: 2px;
  flex-shrink: 0;
}
.work-job-archive-report .page-1 .record-log-title-text {
  font-weight: 700;
  font-size: 1rem;
  color: #334155;
  margin: 0;
}
.work-job-archive-report .page-1 .record-log-title-en {
  font-weight: 500;
  color: #64748b;
  font-size: 0.875rem;
}
/* 归档流水日志 - 表格外层圆角容器（卡片感、浅灰边框） */
.work-job-archive-report .page-1 .record-table-wrap {
  background: #fff;
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.work-job-archive-report .page-1 .record-table-wrap .record-table.record-table-log {
  min-width: 420px;
}
.work-job-archive-report .page-1 .record-table {
  width: 100%;
  table-layout: fixed;
  text-align: left;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.work-job-archive-report .page-1 .record-table.record-table-log thead tr {
  background-color: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.work-job-archive-report .page-1 .record-table.record-table-log th {
  padding: 0.625rem 0.875rem;
  color: #475569;
  font-weight: 600;
  font-size: 0.8125rem;
  vertical-align: middle;
}
.work-job-archive-report .page-1 .record-table.record-table-log th.col-no { width: 2.5em; }
.work-job-archive-report .page-1 .record-table.record-table-log th:nth-child(2) { width: 12em; }
.work-job-archive-report .page-1 .record-table.record-table-log th:nth-child(3) { width: 10em; min-width: 7em; }
.work-job-archive-report .page-1 .record-table.record-table-log th:nth-child(4) { width: 11em; }
.work-job-archive-report .page-1 .record-table.record-table-log th:nth-child(5) { width: 5em; min-width: 5em; white-space: nowrap; }
.work-job-archive-report .page-1 .record-table.record-table-log th:nth-child(6) { min-width: 0; }
.work-job-archive-report .page-1 .record-table.record-table-log td:nth-child(3) {
  min-width: 7em;
}
.work-job-archive-report .page-1 .record-table.record-table-log tbody tr {
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}
.work-job-archive-report .page-1 .record-table.record-table-log tbody tr:last-child {
  border-bottom: none;
}
.work-job-archive-report .page-1 .record-table.record-table-log td {
  padding: 0.625rem 0.875rem;
  vertical-align: middle;
  color: #334155;
  font-size: 0.8125rem;
}
.work-job-archive-report .page-1 .record-table.record-table-log .col-no {
  color: #64748b;
  font-weight: 500;
}
.work-job-archive-report .page-1 .record-table.record-table-log .cell-time {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  color: #475569;
}
.work-job-archive-report .page-1 .record-table.record-table-log .cell-operator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #334155;
}
.work-job-archive-report .page-1 .record-table.record-table-log .cell-operator .archive-log-avatar {
  flex-shrink: 0;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}
.work-job-archive-report .page-1 .record-table.record-table-log .archive-log-avatar {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
}
.work-job-archive-report .page-1 .record-table.record-table-log .archive-log-avatar [data-slot="avatar-image"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.work-job-archive-report .page-1 .record-table.record-table-log .archive-log-avatar [data-slot="avatar-fallback"] {
  width: 100% !important;
  height: 100% !important;
  background-color: #e2e8f0;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-job-archive-report .page-1 .record-table.record-table-log .archive-log-avatar [data-slot="avatar-fallback"].avatar-active {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.work-job-archive-report .page-1 .record-table.record-table-log .cell-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.work-job-archive-report .page-1 .record-table.record-table-log .cell-status .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.work-job-archive-report .page-1 .record-table.record-table-log .cell-status.status-done .status-dot {
  background-color: #22c55e;
}
.work-job-archive-report .page-1 .record-table.record-table-log .cell-status.status-processing .status-dot {
  background-color: #3b82f6;
}
.work-job-archive-report .page-1 .record-table.record-table-log .cell-status.status-done {
  color: #334155;
}
.work-job-archive-report .page-1 .record-table.record-table-log .cell-status.status-processing {
  color: #2563eb;
}
.work-job-archive-report .page-1 .page-num {
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* ========== 第 2 页内容样式（与 test1 一致） ========== */
.work-job-archive-report .page-sheet.page-2 {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.work-job-archive-report .page-2 .page-2-header {
  border-bottom: 1px solid #cbd5e1;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.work-job-archive-report .page-2 .page-2-header h2 {
  font-weight: 700;
  color: #334155;
  margin: 0;
}
.work-job-archive-report .page-2 .page-2-header .doc-ref {
  font-size: 0.75rem;
  color: #94a3b8;
}
.work-job-archive-report .page-2 .flow-wrap {
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  width: 100%;
  box-sizing: border-box;
}
.work-job-archive-report .page-2 .archive-flow-print-wrapper {
  width: 100%;
  height: 480px;
  min-height: 480px;
  min-width: 1px;
  box-sizing: border-box;
}
.work-job-archive-report .page-2 .archive-flow-print-wrapper .archive-flow-inner {
  width: 100%;
  height: 480px;
  min-width: 1px;
  box-sizing: border-box;
}
.work-job-archive-report .page-2 .archive-flow-print-wrapper .archive-flow-inner .react-flow,
.work-job-archive-report .page-2 .archive-flow-print-wrapper .react-flow {
  width: 100% !important;
  height: 100% !important;
  min-width: 1px;
  min-height: 400px;
}
/* 打印时：完整拓扑图整体缩小并居中，隐藏手柄与缩放控制，缩小比例保证流程完整露出 */
@media print {
  .work-job-archive-report .page-2 .flow-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
  }
  .work-job-archive-report .page-2 .archive-flow-print-wrapper {
    transform: scale(0.62) !important;
    transform-origin: top center !important;
  }
  .work-job-archive-report .page-2 .react-flow__handle,
  .work-job-archive-report .page-2 .react-flow__controls {
    display: none !important;
  }
  .work-job-archive-report .page-2 .archive-flow-inner,
  .work-job-archive-report .page-2 .react-flow__viewport {
    overflow: visible !important;
  }
}
.work-job-archive-report .page-2 .flow-legend {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: #64748b;
  display: flex;
  gap: 1rem;
}
.work-job-archive-report .page-2 .flow-legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.work-job-archive-report .page-2 .flow-legend-item .icon {
  width: 12px;
  height: 12px;
  border-radius: 0.25rem;
}
.work-job-archive-report .page-2 .flow-legend-item .icon-done {
  border: 1px solid #22c55e;
  background: white;
}
.work-job-archive-report .page-2 .flow-legend-item .icon-active {
  border: 1px solid #3b82f6;
  background: #eff6ff;
}
.work-job-archive-report .page-2 .flow-legend-item .icon-pending {
  border: 1px solid #cbd5e1;
  background: white;
}
.work-job-archive-report .page-2 .page-num {
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  font-size: 0.75rem;
  color: #94a3b8;
}
