/* ═══ Import UX Improvements — shared across all 25 import pages ═══ */

/* ── Kill the green line between stepper and content ── */
.step-description { display: none !important; }
.import-stepper + .step-description { display: none !important; }
div.step-description { display: none !important; }

/* ── Hide technical fieldName from users ── */
.suggestion-card .field-tech-name,
.error-row .field-tech-name,
.warning-row .field-tech-name {
  display: none !important;
}

/* ── Compact error cards — less padding, tighter spacing ── */
.error-row > div[style*="fff1f0"],
.error-row .err-card {
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
}

/* ── Summary bar at top ── */
.import-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.import-summary .sum-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.sum-chip.valid   { background: #f6ffed; border: 1px solid #b7eb8f; color: #135200; }
.sum-chip.warning { background: #fffbe6; border: 1px solid #ffe58f; color: #614700; }
.sum-chip.error   { background: #fff1f0; border: 1px solid #ffccc7; color: #a8071a; }
.sum-chip.update  { background: #e6f7ff; border: 1px solid #91d5ff; color: #003a8c; }
.sum-chip .count  { font-size: 20px; font-weight: 700; }

/* ── Cleaner update comparison — highlight only changed fields ── */
.update-row .diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.update-row .diff-table th {
  background: var(--bg, #f5f5f5);
  padding: 6px 10px;
  text-align: right;
  font-weight: 600;
  border-bottom: 1px solid #e8e8e8;
}
.update-row .diff-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.update-row .diff-table tr.changed td {
  background: #fffbe6;
}
.update-row .diff-table tr.unchanged {
  display: none;
}
.update-row.show-all .diff-table tr.unchanged {
  display: table-row;
}
.update-row .diff-table .old-val {
  color: #ff4d4f;
  text-decoration: line-through;
}
.update-row .diff-table .new-val {
  color: #52c41a;
  font-weight: 600;
}

/* ── Suggestion option — cleaner radio buttons ── */
.sug-option {
  cursor: pointer;
  transition: background .15s;
}
.sug-option:hover {
  background: var(--bg, #f5f5f5);
}
.sug-option.selected {
  background: #e6f7ff;
  border-color: #91d5ff;
}

/* ── Progress indicator during save ── */
.save-progress {
  text-align: center;
  padding: 40px 20px;
}
.save-progress .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f0f0f0;
  border-top: 4px solid var(--primary, #1890ff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Save result summary ── */
.save-result {
  text-align: center;
  padding: 30px 20px;
}
.save-result .big-number {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}
.save-result .big-number.success { color: #52c41a; }
.save-result .big-number.partial { color: #faad14; }
.save-result .big-number.fail    { color: #ff4d4f; }
.save-result .subtitle {
  font-size: 16px;
  color: var(--text2, #666);
  margin-top: 8px;
}
.save-result .detail-line {
  font-size: 14px;
  margin-top: 4px;
}

/* ═══ DARK THEME FIXES ═══ */
/* Broad inline-style overrides — matches ANY element carrying the hex color,
   regardless of nesting depth. Needed because React renders inline styles. */
[data-theme="dark"] [style*="fff1f0"] { background: #2a1215 !important; border-color: #58181c !important; color: var(--text) !important; }
[data-theme="dark"] [style*="ffccc7"] { border-color: #58181c !important; }
[data-theme="dark"] [style*="fffbe6"] { background: #2b2111 !important; border-color: #594214 !important; }
[data-theme="dark"] [style*="ffe58f"] { border-color: #594214 !important; }
[data-theme="dark"] [style*="f6ffed"] { background: #162312 !important; border-color: #274916 !important; }
[data-theme="dark"] [style*="b7eb8f"] { border-color: #274916 !important; }
[data-theme="dark"] [style*="a8071a"] { color: #ff7875 !important; }
[data-theme="dark"] [style*="946200"] { color: #ffc53d !important; }
[data-theme="dark"] [style*="389e0d"] { color: #95de64 !important; }
[data-theme="dark"] code { background: #2a2a2a !important; color: #e8e8e8 !important; }
[data-theme="dark"] .warning-row .suggestion-card,
[data-theme="dark"] .warning-row > div[style*="fffbe6"] {
  background: #2b2111 !important;
  border-color: #594214 !important;
}
[data-theme="dark"] .summary-card,
[data-theme="dark"] .summary-cards > div {
  background: var(--bg2) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .sug-option.selected {
  background: #111d2c !important;
  border-color: #15395b !important;
}
[data-theme="dark"] .fix-field input,
[data-theme="dark"] .search-select input {
  background: var(--input-bg, #2a2a2a) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] code {
  background: #2a2a2a !important;
  color: #e8e8e8 !important;
}
[data-theme="dark"] .update-row .diff-table th {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .update-row .diff-table td {
  border-color: var(--border) !important;
}
[data-theme="dark"] .update-row .diff-table tr.changed td {
  background: #2b2111 !important;
}
[data-theme="dark"] .sum-chip.valid   { background: #162312 !important; border-color: #274916 !important; color: #95de64 !important; }
[data-theme="dark"] .sum-chip.warning { background: #2b2111 !important; border-color: #594214 !important; color: #ffc53d !important; }
[data-theme="dark"] .sum-chip.error   { background: #2a1215 !important; border-color: #58181c !important; color: #ff7875 !important; }
[data-theme="dark"] .sum-chip.update  { background: #111d2c !important; border-color: #15395b !important; color: #69c0ff !important; }

/* ── Force inline style overrides for dark theme ── */
[data-theme="dark"] div[style*="background:#fff1f0"],
[data-theme="dark"] div[style*="background: #fff1f0"] {
  background: #2a1215 !important;
  border-color: #58181c !important;
}
[data-theme="dark"] div[style*="background:#fffbe6"],
[data-theme="dark"] div[style*="background: #fffbe6"] {
  background: #2b2111 !important;
  border-color: #594214 !important;
}
[data-theme="dark"] div[style*="background:#f6ffed"],
[data-theme="dark"] div[style*="background: #f6ffed"] {
  background: #162312 !important;
  border-color: #274916 !important;
}
[data-theme="dark"] div[style*="background:#e6f7ff"],
[data-theme="dark"] div[style*="background: #e6f7ff"] {
  background: #111d2c !important;
  border-color: #15395b !important;
}
[data-theme="dark"] table[style*="background:#fff"],
[data-theme="dark"] table[style*="background: #fff"] {
  background: var(--bg2) !important;
}
[data-theme="dark"] tr[style*="background:#fafafa"],
[data-theme="dark"] tr[style*="background: #fafafa"] {
  background: var(--bg) !important;
}
[data-theme="dark"] span[style*="color:#a8071a"],
[data-theme="dark"] div[style*="color:#a8071a"] {
  color: #ff7875 !important;
}
[data-theme="dark"] span[style*="color:#946200"],
[data-theme="dark"] div[style*="color:#946200"] {
  color: #ffc53d !important;
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text2, #999);
}
.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}