/* Import Wizard — all rules scoped under .import-wizard-host-root. No bare
   body/html, no unqualified *, no override of Mainline's own .sidebar/
   .header/table/button/modal classes, no second Design System — colors/
   spacing/radius all reuse ClinicOS's own tokens (design-tokens.css) via
   var(...), falling back to a plain value only where no existing token
   covers it. Desktop First: min-width assumes a desktop viewport; no
   mobile-first collapsing this round (see manual RWD UAT item). */

.import-wizard-host-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 640px;
  font-family: inherit;
  color: var(--text-primary, #172033);
}

/* SYSTEM-INITIALIZATION-WIZARD-V4-ADAPTATION-PHASE2
   .iw-header / .iw-header-title / .iw-header-subtitle 已移除 —— 那是本模組自產的第二個
   Page Header，V4 的 Page Title／說明一律由 NavWorkspaceShellV2 產生。
   進度指示保留，改掛在 .iw-progress-bar；沿用原本 .iw-header 的間距與分隔線，
   不重寫元件、不改視覺語彙（本輪只對齊外層 Presentation，不重新設計 UI）。 */
.iw-progress-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #ffffff);
}

.iw-header-progress {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #596579);
}

.iw-header-progress strong {
  color: var(--sidebar-active, #2563eb);
  font-size: 16px;
}

.iw-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ---- Stepper (left) ---- */
.iw-stepper {
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border-color, #e5e7eb);
  background: var(--content-bg, #f9fafb);
  padding: 8px 0;
}

.iw-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 20px;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.iw-step-item:hover {
  background: rgba(37, 99, 235, 0.06);
}

.iw-step-item.iw-step-active {
  border-left-color: var(--sidebar-active, #2563eb);
  background: rgba(37, 99, 235, 0.08);
}

.iw-step-badge {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: #e5e7eb;
  color: #596579;
}

.iw-step-badge.iw-badge-completed { background: #16a34a; color: #fff; }
.iw-step-badge.iw-badge-warning { background: #f59e0b; color: #fff; }
.iw-step-badge.iw-badge-blocked { background: #dc2626; color: #fff; }
.iw-step-badge.iw-badge-in-progress { background: #2563eb; color: #fff; }

.iw-step-text-title {
  font-size: 14px;
  font-weight: 600;
}

.iw-step-text-status {
  font-size: 12px;
  color: var(--text-secondary, #596579);
  margin-top: 2px;
}

/* ---- Content (right) ---- */
.iw-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.iw-step-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}

.iw-step-header p {
  font-size: 13px;
  color: var(--text-secondary, #596579);
  margin: 0 0 16px;
}

.iw-status-line {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 16px;
}

/* iw-status-line 是「訊息區塊」——整段說明文字（未滿足前置、警告、統計摘要），
   不是狀態標籤。狀態標籤一律用下面的 .iw-badge 元件。兩者刻意分開：
   訊息區塊要能放整段中文與清單，用深字淺底才讀得下去；標籤是短詞，用白字實色。
   下列前景色皆已量測對比（全部 ≥ 7.7:1，優於原本的 6.3～6.8:1）。 */
.iw-status-line.iw-status-ready { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.iw-status-line.iw-status-partial { background: #fef3c7; color: #713f12; border: 1px solid #fcd34d; }
.iw-status-line.iw-status-not-implemented { background: #e5e7eb; color: #374151; border: 1px solid #d1d5db; }
.iw-status-line.iw-status-blocked { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }

/* ---- Wizard Status Badge —— 全精靈唯一的狀態標籤元件 ----------------------
   六種狀態共用同一組尺寸（高度／padding／圓角／字級／字重），只有底色不同，
   因此每一列的標籤在視覺上完全對齊，不會因狀態不同而高矮不一。

   color 一律寫死 #FFFFFF，不用 inherit／rgba()／opacity／var()：
   這個元件會被放進各種父層（清單列、面板、Footer），只要顏色可被繼承或被
   透明度稀釋，就會在某些父層底下變成灰字。寫死才不會被覆蓋。

   對比（白字 on 底色）皆為 AA 以上：
     completed 7.13:1  configurable 6.70:1  deferred 5.02:1
     skipped   7.56:1  unsupported  7.58:1  blocked  6.47:1              */
.iw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  vertical-align: middle;
  border: 0;
  color: #ffffff;
  background: #4b5563;
}

.iw-badge--completed { background: #166534; color: #ffffff; }
.iw-badge--configurable { background: #1d4ed8; color: #ffffff; }
.iw-badge--deferred { background: #b45309; color: #ffffff; }
.iw-badge--skipped { background: #4b5563; color: #ffffff; }
.iw-badge--unsupported { background: #475569; color: #ffffff; }
.iw-badge--blocked { background: #b91c1c; color: #ffffff; }

/* 每一列的「名稱 ＋ 標籤」共用同一個 flex 列，因此所有 Row 的水平間距與
   垂直對齊完全一致，不再依賴 inline 元素之間的空白字元。 */
.iw-task-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.iw-panel {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--card-bg, #ffffff);
}

.iw-panel h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text-secondary, #596579);
}

.iw-validation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.iw-validation-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}

/* 驗證訊息同樣提高對比（原本 6.4～6.8:1 → 現在 8.0～8.3:1），並加上同色系
   邊框，讓黃色警告在白底面板上有明確邊界，不會看起來像沒有背景的純文字。 */
.iw-validation-item.iw-sev-blocker { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.iw-validation-item.iw-sev-warning { background: #fef3c7; color: #713f12; border: 1px solid #fcd34d; }
.iw-validation-item.iw-sev-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

.iw-validation-icon { font-weight: 700; }

.iw-empty-validations {
  font-size: 13px;
  color: var(--text-secondary, #596579);
}

.iw-form-placeholder {
  border: 1px dashed var(--border-color, #d0d5dd);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  color: var(--text-secondary, #596579);
  font-size: 13px;
}

/* ---- Footer / Navigation ---- */
.iw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #ffffff);
}

.iw-footer-left {
  font-size: 12px;
  color: var(--text-secondary, #596579);
}

.iw-footer-right {
  display: flex;
  gap: 10px;
}

/* 所有按鈕（前往設定／儲存並繼續／稍後處理／略過／重新設定）共用同一個高度。
   原本只給 padding，實際高度會隨字級與行高浮動，同一列的按鈕因此高矮不齊；
   改用固定 min-height ＋ inline-flex 置中，內容多寡都不影響外框高度。 */
.iw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  box-sizing: border-box;
  border: 1px solid var(--border-color, #d0d5dd);
  background: #fff;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #1f2937;
  cursor: pointer;
}

.iw-btn:hover { background: #f9fafb; }
.iw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.iw-btn-primary {
  background: var(--sidebar-active, #2563eb);
  border-color: var(--sidebar-active, #2563eb);
  color: #fff;
}

.iw-btn-primary:hover { background: #1d4ed8; }

.iw-empty-state {
  padding: 40px;
  text-align: center;
  color: var(--text-secondary, #596579);
}

@media (max-width: 1199px) {
  .import-wizard-host-root .iw-stepper { width: 210px; }
  .import-wizard-host-root .iw-content { padding: 16px 18px; }
}

/* ---- suggestedAction button inside a validation item ---- */
.iw-validation-action {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 12px;
}

/* ---- Login Reminder Modal (Super Controlled Clinic Activation) ---- */
.iw-reminder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.iw-reminder-modal {
  background: var(--card-bg, #ffffff);
  border-radius: 12px;
  padding: 24px;
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.iw-reminder-modal h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

.iw-reminder-body p { margin: 8px 0; font-size: 13px; }

.iw-reminder-savetime {
  color: var(--text-secondary, #596579);
}

.iw-reminder-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ---- Dashboard reminder banner (persists after "稍後處理") ---- */
.iw-dashboard-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fef9c3;
  color: #854d0e;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
}