/* ============================================================
   期初数据导入 · 五步向导样式（T6-2，第4波）
   前缀 oi-，不污染全局。颜色/圆角/间距/阴影全部引用既有变量：
   - 主体令牌：css/design-system.css :root
   - 状态色令牌：css/style.css :root（--green/--red/--orange 及 soft、--card 白底；
     design-system.css 未定义状态色令牌，五个状态徽章需语义区分，故复用全局既有变量）
   本文件零硬编码色值：不出现任何色值字面量，全部走变量引用。
   ============================================================ */

/* ---------- 向导外壳与步骤条 ---------- */
.oi-wizard { max-width: 1080px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; }
.oi-wizard [hidden] { display: none !important; }

.oi-steps { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-bottom: 4px; }
.oi-step { display: flex; align-items: center; gap: 8px; color: var(--gray-500); font-size: 13px; white-space: nowrap; }
.oi-step-dot { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--gray-100); color: var(--gray-500); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.oi-step-label { font-weight: 500; }
.oi-step-connector { flex: 1; min-width: 16px; height: 2px; background: var(--border); border-radius: 1px; }
.oi-step.is-done { color: var(--primary); }
.oi-step.is-done .oi-step-dot { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.oi-step.is-active { color: var(--gray-900); }
.oi-step.is-active .oi-step-dot { background: var(--primary); border-color: var(--primary); color: var(--card); box-shadow: var(--focus-ring); }
.oi-step.is-locked { opacity: .55; }
.oi-step-connector.is-done { background: var(--primary); }

/* ---------- 步骤内容区与底部按钮区 ---------- */
.oi-wizard-body { margin-top: 14px; }
.oi-step-panel { display: none; }
.oi-step-panel.is-active { display: block; }
.oi-wizard-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.oi-wizard-status { margin-right: auto; font-size: 12px; color: var(--gray-500); line-height: 1.6; }

/* ---------- 提示条 ---------- */
.oi-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.oi-alert--info { background: var(--primary-soft); color: var(--primary); }
.oi-alert--warn { background: var(--orange-soft); color: var(--orange); }
.oi-alert--error { background: var(--red-soft); color: var(--red); }

/* ---------- 第1步：上传区（文件类型分组卡片 + 拖放提示） ---------- */
.oi-upload { display: grid; gap: 16px; }
.oi-upload-drop { border: 2px dashed var(--gray-300); border-radius: var(--radius); background: var(--gray-50); padding: 34px 20px; text-align: center; transition: border-color .15s ease, background-color .15s ease; }
.oi-upload-drop.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
.oi-upload-icon { font-size: 28px; line-height: 1; }
.oi-upload-title { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--gray-800); }
.oi-upload-hint { margin-top: 6px; font-size: 12px; line-height: 1.7; color: var(--gray-500); }
.oi-upload-actions { margin-top: 12px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

.oi-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.oi-type-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font: inherit; }
.oi-type-card:hover { background: var(--gray-50); border-color: var(--gray-300); }
.oi-type-card.is-selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--shadow); }
.oi-type-icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.oi-type-name { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.oi-type-desc { margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--gray-500); }

.oi-file-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.oi-file-name { font-size: 13px; color: var(--gray-800); overflow-wrap: anywhere; }
.oi-file-size { font-size: 12px; color: var(--gray-500); white-space: nowrap; }
.oi-file-remove { margin-left: auto; flex-shrink: 0; background: none; border: 0; padding: 4px 6px; font-size: 12px; color: var(--gray-500); cursor: pointer; border-radius: var(--radius-sm); }
.oi-file-remove:hover { color: var(--red); background: var(--red-soft); }

/* ---------- 第2/3步：映射表格（列映射 / 实体映射 + 状态徽章） ---------- */
.oi-map-section + .oi-map-section { margin-top: 18px; }
.oi-map-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.oi-map-title { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.oi-map-count { font-size: 12px; color: var(--gray-500); }
.oi-map-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* 横向滚动锁在容器内：容器 overflow-x:auto + 表格 min-width，小屏不出页面 */
.oi-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: auto; max-width: 100%; overscroll-behavior-x: contain; }
.oi-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.oi-table thead th { position: sticky; top: 0; z-index: 1; background: var(--gray-50); color: var(--gray-600); font-size: 12px; font-weight: 500; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.oi-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--gray-200); font-size: 13px; color: var(--gray-700); vertical-align: middle; overflow-wrap: anywhere; }
.oi-table tbody tr:hover > td { background: var(--gray-50); }
.oi-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oi-table .nowrap { white-space: nowrap; }
.oi-table td.oi-cell-status { white-space: nowrap; }

/* 行状态底色（写在 hover 之后，覆盖悬停色） */
.oi-table tbody tr.is-pick > td { background: var(--orange-soft); }
.oi-table tbody tr.is-blocked > td { background: var(--red-soft); }

/* 状态徽章：已匹配 / 将新建 / 需选择 / 阻断 / 忽略 */
.oi-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; white-space: nowrap; }
.oi-status--matched { background: var(--green-soft); color: var(--green); }
.oi-status--new { background: var(--primary-soft); color: var(--primary); }
.oi-status--pick { background: var(--orange-soft); color: var(--orange); }
.oi-status--blocked { background: var(--red-soft); color: var(--red); }
.oi-status--ignored { background: var(--gray-100); color: var(--gray-500); }

/* 表格内字段：桌面 36px 高 / 13px 字号 */
.oi-field { width: 100%; min-width: 0; min-height: 36px; padding: 6px 8px; font: inherit; font-size: 13px; color: var(--gray-800); background: var(--card); border: 1px solid var(--field-border); border-radius: var(--radius-sm); }
.oi-field:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.oi-field:disabled, .oi-field[readonly] { background: var(--gray-50); color: var(--gray-500); }
.oi-hint { font-size: 12px; color: var(--gray-500); line-height: 1.6; }

/* ---------- 第4步：对账表（借贷合计 + 差额行 + 逐科目滚动区） ---------- */
.oi-balance { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; padding: 16px 18px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; }
.oi-balance-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oi-balance-label { font-size: 11px; color: var(--gray-500); }
.oi-balance-num { font-size: 20px; font-weight: 600; color: var(--gray-900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.oi-balance-diff { flex-basis: 100%; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--gray-300); font-size: 13px; color: var(--gray-600); }
.oi-balance-diff-num { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.oi-balance-diff.is-ok .oi-balance-diff-num { color: var(--green); }
.oi-balance-diff.is-bad .oi-balance-diff-num { color: var(--red); }

.oi-subject-scroll { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: auto; max-height: 340px; overscroll-behavior: contain; }
.oi-subject-scroll .oi-table { min-width: 520px; }
.oi-subject-scroll .oi-table thead th { top: 0; }

/* ---------- 第5步：确认页（统计卡 + 二次确认框） ---------- */
.oi-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.oi-stat-card { padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.oi-stat-label { font-size: 12px; color: var(--gray-500); }
.oi-stat-num { margin-top: 6px; font-size: 22px; font-weight: 600; color: var(--gray-900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.oi-stat-card.is-ok .oi-stat-num { color: var(--green); }
.oi-stat-card.is-warn .oi-stat-num { color: var(--orange); }
.oi-stat-card.is-bad .oi-stat-num { color: var(--red); }

.oi-confirm-box { padding: 18px; background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: var(--radius); }
.oi-confirm-title { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.oi-confirm-text { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--gray-600); }
.oi-confirm-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--gray-700); cursor: pointer; }
.oi-confirm-check input { margin-top: 3px; flex-shrink: 0; }

/* ---------- 移动端（390px 档：字段 42px/16px，表格容器内横向滚动） ---------- */
@media (max-width: 768px) {
  .oi-wizard { padding: 14px; }
  .oi-steps { flex-wrap: wrap; gap: 6px; }
  .oi-step-connector { display: none; }
  .oi-step { padding: 5px 8px; background: var(--gray-50); border-radius: var(--radius-sm); font-size: 12px; }
  .oi-step-dot { width: 22px; height: 22px; font-size: 11px; }

  .oi-upload-drop { padding: 24px 14px; }
  .oi-type-grid { grid-template-columns: 1fr; }

  /* 字段移动端 42px 高 / 16px 字号（防 iOS 缩放，同 design-system 断点） */
  .oi-field { font-size: 16px; min-height: 42px; padding: 8px 10px; }

  /* 表格容器内部横向滚动，不撑破页面 */
  .oi-table-wrap, .oi-subject-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .oi-table { min-width: 620px; }
  .oi-subject-scroll .oi-table { min-width: 460px; }
  .oi-table thead th, .oi-table tbody td { padding: 8px; }

  .oi-balance { padding: 14px; gap: 10px 18px; }
  .oi-balance-num { font-size: 18px; }
  .oi-balance-diff-num { font-size: 15px; }

  .oi-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oi-stat-num { font-size: 20px; }
  .oi-confirm-box { padding: 14px; }

  .oi-wizard-foot { gap: 8px; }
  .oi-wizard-foot .btn { flex: 1 1 auto; }
}