/* 研討會演示站台版面。亮底為主，只有 log 區是暗的（PLAN §4.2）。 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--mig-font-sans);
  font-size: var(--mig-fs-base);
  line-height: var(--mig-lh-base);
  color: var(--mig-text-primary);
  background: var(--mig-bg-secondary);
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { margin: 0; }

button { font-family: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── 頁首 ──────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--mig-space-4);
  padding: var(--mig-space-3) var(--mig-space-6);
  background: var(--mig-bg-primary);
  border-bottom: 1px solid var(--mig-border-light);
  box-shadow: var(--mig-shadow-sm);
  flex: none;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--mig-space-2);
}

.brand__mark {
  font-size: var(--mig-fs-xl);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mig-primary-600);
}

.brand__sub {
  font-size: var(--mig-fs-xs);
  color: var(--mig-text-tertiary);
}

.topbar__spacer { flex: 1; }

.topbar__meta {
  font-size: var(--mig-fs-xs);
  color: var(--mig-text-tertiary);
  text-align: right;
  line-height: 1.5;
}

.topbar__meta code {
  font-family: var(--mig-font-mono);
  color: var(--mig-text-secondary);
}

/* ── 按鈕 ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mig-space-2);
  padding: var(--mig-btn-padding);
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: var(--mig-radius-md);
  font-size: var(--mig-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}

.btn:focus-visible { outline: none; box-shadow: var(--mig-shadow-focus); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--mig-primary-500); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--mig-primary-600); }

.btn--ghost {
  background: var(--mig-bg-primary);
  color: var(--mig-text-secondary);
  border-color: var(--mig-border-medium);
}
.btn--ghost:hover:not(:disabled) { border-color: var(--mig-text-tertiary); }

.btn--danger {
  background: var(--mig-bg-primary);
  color: var(--mig-danger);
  border-color: var(--mig-danger);
}
.btn--danger:hover:not(:disabled) { background: var(--mig-danger-bg); }

.btn--iso { background: var(--iso-brand); color: #fff; }
.btn--iso:hover:not(:disabled) { background: #5f3f57; }
.btn--iso:focus-visible { box-shadow: var(--iso-shadow-focus); }

/* ── 五步驟進度條 ──────────────────────────────────────────────── */

.steps {
  display: flex;
  align-items: stretch;
  gap: var(--mig-space-2);
  padding: var(--mig-space-3) var(--mig-space-6);
  background: var(--mig-bg-primary);
  border-bottom: 1px solid var(--mig-border-light);
  overflow-x: auto;
  flex: none;
}

.step {
  flex: 1 1 0;
  min-width: 168px;
  display: flex;
  align-items: center;
  gap: var(--mig-space-3);
  padding: var(--mig-space-2) var(--mig-space-3);
  background: var(--mig-bg-tertiary);
  border: 1px solid var(--mig-border-light);
  border-radius: var(--mig-radius-lg);
  cursor: pointer;
  text-align: left;
  color: var(--mig-text-tertiary);
}

.step:focus-visible { outline: none; box-shadow: var(--mig-shadow-focus); }

.step__num {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--mig-radius-full);
  background: var(--mig-border-light);
  color: var(--mig-text-tertiary);
  font-size: var(--mig-fs-xs);
  font-weight: 700;
}

.step__body { min-width: 0; }
.step__title { display: block; font-size: var(--mig-fs-sm); font-weight: 600; color: var(--mig-text-secondary); }
.step__hint { display: block; font-size: var(--mig-fs-xs); line-height: 1.4; color: var(--mig-text-tertiary); }

.step[aria-current="step"] {
  background: var(--mig-primary-50);
  border-color: var(--mig-primary-500);
}
.step[aria-current="step"] .step__num { background: var(--mig-primary-500); color: #fff; }
.step[aria-current="step"] .step__title { color: var(--mig-primary-700); }

.step--done .step__num { background: var(--mig-success); color: #fff; }

/* iso2erp 那一步用紫，明示它是另一個產品 */
.step--iso[aria-current="step"] { background: var(--iso-brand-tint); border-color: var(--iso-brand); }
.step--iso[aria-current="step"] .step__num { background: var(--iso-brand); }
.step--iso[aria-current="step"] .step__title { color: var(--iso-brand); }

/* ── 主版面 ────────────────────────────────────────────────────── */

.layout {
  flex: 1;
  display: grid;
  /* 側欄壓到 340px 起跳：主舞台的欄位映射表有 6 欄，1440 寬的螢幕上
     側欄再寬一點就會把表格擠到要橫向捲動。 */
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: var(--mig-space-4);
  padding: var(--mig-space-4) var(--mig-space-6);
  min-height: 0;
}

.stage, .side { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--mig-space-4); }
.stage { overflow-y: auto; }

.card {
  background: var(--mig-bg-primary);
  border: 1px solid var(--mig-border-light);
  border-radius: var(--mig-radius-lg);
  box-shadow: var(--mig-shadow-sm);
  padding: var(--mig-space-4);
}

.card__head {
  display: flex;
  align-items: center;
  gap: var(--mig-space-3);
  margin-bottom: var(--mig-space-3);
}

.card__title { font-size: var(--mig-fs-lg); font-weight: 600; }
.card__desc { font-size: var(--mig-fs-sm); color: var(--mig-text-tertiary); margin: 0 0 var(--mig-space-3); }
.card__spacer { flex: 1; }

/* ── 徽章 ──────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--mig-radius-full);
  font-size: var(--iso-fs-status-tag);
  font-weight: var(--iso-fw-status-tag);
  line-height: var(--iso-lh-status-tag);
  white-space: nowrap;
}

.badge--idle    { background: var(--mig-neutral-bg); color: var(--mig-neutral); }
.badge--running { background: var(--mig-info-bg);    color: var(--mig-info); }
.badge--done    { background: var(--mig-success-bg); color: #047857; }
.badge--failed  { background: var(--mig-danger-bg);  color: var(--mig-danger); }

/* 信心分數三色階：UX 規格 §2.2「成功/警告/錯誤」三列，≥85 綠／60–85 黃／<60 紅 */
.badge--conf-high { background: var(--iso-success-bg); color: var(--iso-success-fg); }
.badge--conf-mid  { background: var(--iso-warning-bg); color: var(--iso-warning-fg); }
.badge--conf-low  { background: var(--iso-danger-bg);  color: var(--iso-danger-fg); }

/* AI 標示：兩個半邊一律紫（PLAN §4.2）。圖示用 lucide SVG，不用 emoji（UX §8.3）。*/
.ai-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--mig-radius-full);
  background: var(--iso-ai-bg);
  color: var(--iso-ai-fg);
  font-size: var(--iso-fs-ai-label);
  font-weight: var(--iso-fw-ai-label);
  line-height: var(--iso-lh-ai-label);
}

.ai-mark svg { width: 14px; height: 14px; }

.badge--proto {
  background: var(--iso-ai-bg);
  color: var(--iso-ai-fg);
  border: 1px dashed var(--iso-ai-border);
}

/* ── 階段卡片（管線）───────────────────────────────────────────── */

.stagecards { display: grid; gap: var(--mig-space-2); }

.stagecard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--mig-space-3);
  padding: var(--mig-space-3);
  background: var(--mig-bg-primary);
  border: 1px solid var(--mig-border-light);
  border-left: 3px solid var(--mig-border-medium);
  border-radius: var(--mig-radius-md);
}

.stagecard--running { border-left-color: var(--mig-info); background: var(--mig-info-bg); }
.stagecard--done    { border-left-color: var(--mig-success); }
.stagecard--failed  { border-left-color: var(--mig-danger); background: var(--mig-danger-bg); }

.stagecard__name { font-size: var(--mig-fs-sm); font-weight: 600; }
.stagecard__sub  { font-size: var(--mig-fs-xs); color: var(--mig-text-tertiary); line-height: 1.4; }
.stagecard__right { text-align: right; display: grid; gap: 4px; justify-items: end; }
.stagecard__ms { font-family: var(--mig-font-mono); font-size: var(--mig-fs-xs); color: var(--mig-text-tertiary); }

.stagecard__stats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mig-space-1) var(--mig-space-3);
  font-size: var(--mig-fs-xs);
  color: var(--mig-text-tertiary);
  font-family: var(--mig-font-mono);
}

.stagecard__stats b { color: var(--mig-text-primary); font-weight: 600; }

.spinner {
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
}

/* ── log 區（唯一的暗底）───────────────────────────────────────── */

.log {
  flex: 1;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  background: var(--iso-dark-bg);
  border: 1px solid var(--iso-dark-border);
  border-radius: var(--mig-radius-lg);
  overflow: hidden;
}

.log__head {
  display: flex;
  align-items: center;
  gap: var(--mig-space-2);
  padding: var(--mig-space-2) var(--mig-space-3);
  background: var(--iso-dark-surface);
  border-bottom: 1px solid var(--iso-dark-border);
  color: var(--iso-dark-text-muted);
  font-size: var(--mig-fs-xs);
  font-family: var(--mig-font-mono);
}

.log__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mig-success); }
.log__dot--off { background: var(--mig-neutral); }

.log__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--mig-space-3);
  margin: 0;
  font-family: var(--mig-font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--iso-dark-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.log__line { display: block; }
.log__line--cmd { color: #7dd3fc; }
.log__line--err { color: #fca5a5; }
.log__stage { color: var(--iso-dark-text-muted); }
.log__empty { color: var(--iso-dark-text-muted); }

/* ── 表格 ──────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mig-fs-sm);
}

table.data th, table.data td {
  padding: var(--mig-space-2) var(--mig-space-3);
  border-bottom: 1px solid var(--mig-border-light);
  text-align: left;
  vertical-align: top;
}

table.data th {
  font-size: var(--mig-fs-xs);
  font-weight: 600;
  color: var(--mig-text-tertiary);
  background: var(--mig-bg-tertiary);
  white-space: nowrap;
}

table.data tbody tr:hover { background: var(--mig-bg-secondary); }
table.data code { font-family: var(--mig-font-mono); font-size: 12px; }

/* 欄位映射表：欄寬固定，不讓瀏覽器自己分配。
   讓它自己分配的結果是理由那欄把信心分數擠出畫面（實測踩過兩次）。 */
table.data--map { table-layout: fixed; width: 100%; }
table.data--map th:nth-child(1), table.data--map td:nth-child(1) { width: 190px; }
table.data--map th:nth-child(2), table.data--map td:nth-child(2) { width: 28px; }
table.data--map th:nth-child(4), table.data--map td:nth-child(4) { width: 96px; }
table.data--map th:nth-child(5), table.data--map td:nth-child(5) { width: 96px; }
table.data--map td:nth-child(4) code { word-break: break-all; }

.arrow { color: var(--mig-text-tertiary); padding: 0 2px; }

/* ── iso2erp 半邊：長得像 Odoo（UX §1.2）──────────────────────── */

.odoo {
  border: 1px solid var(--iso-border);
  border-radius: var(--iso-radius-lg);
  overflow: hidden;
  background: var(--iso-surface);
  font-family: var(--iso-font-sans);
  color: var(--iso-text);
}

/* O-1 頂部 App 切換器 */
.odoo__bar {
  display: flex;
  align-items: center;
  gap: var(--iso-space-4);
  padding: 0 var(--iso-space-3);
  height: 44px;
  background: var(--iso-brand);
  color: #fff;
  font-size: var(--iso-fs-form-body);
}

.odoo__apps {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.odoo__apps svg { width: 18px; height: 18px; }
.odoo__bar-spacer { flex: 1; }
.odoo__bar-right { display: flex; align-items: center; gap: var(--iso-space-3); font-size: var(--iso-fs-caption); }

.odoo__body { display: grid; grid-template-columns: var(--iso-sidebar-w) minmax(0, 1fr); }

/* O-2 左側摺疊選單 */
.odoo__side {
  background: var(--iso-brand-tint);
  border-right: 1px solid var(--iso-border);
  padding: var(--iso-space-3) 0;
}

.odoo__side-group {
  padding: var(--iso-space-2) var(--iso-space-4) var(--iso-space-1);
  font-size: var(--iso-fs-caption);
  color: var(--iso-text-muted);
  text-transform: none;
}

.odoo__side a {
  display: block;
  padding: var(--iso-space-2) var(--iso-space-4);
  font-size: var(--iso-fs-form-body);
  color: var(--iso-text);
  text-decoration: none;
}

.odoo__side a[aria-current="page"] {
  background: var(--iso-surface);
  border-left: 3px solid var(--iso-brand);
  font-weight: 500;
  color: var(--iso-brand);
}

.odoo__main { padding: var(--iso-space-6); }

/* O-5 主要操作在標題列右側 */
.odoo__statusbar {
  display: flex;
  align-items: center;
  gap: var(--iso-space-3);
  margin-bottom: var(--iso-space-4);
}

.odoo__title {
  font-size: var(--iso-fs-page-title);
  font-weight: var(--iso-fw-page-title);
  line-height: var(--iso-lh-page-title);
}

.odoo__statusbar-spacer { flex: 1; }

.odoo__section-title {
  font-size: var(--iso-fs-module-title);
  font-weight: var(--iso-fw-module-title);
  line-height: var(--iso-lh-module-title);
  margin: var(--iso-space-6) 0 var(--iso-space-3);
}

/* 拖放上傳區（UX §6.6：Drag Over 邊框轉品牌主色、底色 #F8F4F7）*/
.dropzone {
  border: 2px dashed var(--iso-gray-300);
  border-radius: var(--iso-radius-lg);
  padding: var(--iso-space-8) var(--iso-space-4);
  text-align: center;
  color: var(--iso-text-muted);
  font-size: var(--iso-fs-form-body);
  background: var(--iso-surface);
}

.dropzone.is-over { border-color: var(--iso-brand); background: var(--iso-brand-tint); }
.dropzone__hint { font-size: var(--iso-fs-caption); margin-top: var(--iso-space-2); }

.odoo table.data th { background: var(--iso-gray-100); color: var(--iso-text-muted); }
.odoo table.data th, .odoo table.data td { border-bottom-color: var(--iso-border); }
.odoo table.data tbody tr:hover { background: var(--iso-brand-tint); }

/* 低信心列：紅框 + 「待人工確認」，且不自動採用（UX 附錄 A）*/
tr.row--low td { background: var(--iso-danger-bg); }

/* 版本漂移命中：AI 推薦了一個真機上不存在的欄位 */
tr.row--drift td { background: var(--iso-warning-bg); }
tr.row--drift td:first-child { box-shadow: inset 3px 0 0 var(--iso-danger-fg); }

.ai-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--iso-fs-caption);
  color: var(--iso-text-muted);
  cursor: pointer;
}

.ai-switch-label input { accent-color: var(--iso-ai-fg); }

.notice {
  padding: var(--iso-space-3) var(--iso-space-4);
  border-radius: var(--iso-radius-md);
  font-size: var(--iso-fs-form-body);
  line-height: 1.6;
}

.notice--info { background: var(--iso-info-bg); color: var(--iso-info-fg); }
.notice--ai   { background: var(--iso-ai-bg);   color: var(--iso-ai-fg); }
.notice--warn { background: var(--iso-warning-bg); color: var(--iso-warning-fg); }
.notice--err  { background: var(--iso-danger-bg);  color: var(--iso-danger-fg); }

.notice__title { font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.notice svg { width: 16px; height: 16px; flex: none; }

/* ── 統計磚 ────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--mig-space-3); }

.tile {
  padding: var(--mig-space-3);
  background: var(--mig-bg-tertiary);
  border-radius: var(--mig-radius-lg);
}

.tile__label { font-size: var(--mig-fs-xs); color: var(--mig-text-tertiary); }
.tile__value { font-size: var(--mig-fs-2xl); font-weight: 700; line-height: 1.2; font-family: var(--mig-font-mono); }
.tile__value--ok { color: var(--mig-primary-600); }
.tile__value--bad { color: var(--mig-danger); }

/* ── 響應式（UX §4.1：桌面 ≥1200 / 平板 768–1199 / 行動 <768）──── */

@media (max-width: 1199px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .odoo__body { grid-template-columns: var(--iso-sidebar-w-collapsed) minmax(0, 1fr); }
  .odoo__side a { font-size: 0; padding: var(--iso-space-3) 0; text-align: center; }
  .odoo__side-group { display: none; }
}

@media (max-width: 767px) {
  .layout { padding: var(--iso-page-padding-mobile); }
  .topbar { padding: var(--mig-space-2) var(--iso-page-padding-mobile); }
  .odoo__body { grid-template-columns: minmax(0, 1fr); }
  .odoo__side { display: none; }
  .btn { min-height: var(--iso-touch-target-min); }
}

/* 儲存格內的補充說明（AI 給的理由等）：附在主要值底下，不另開一欄。 */
.cell-note {
  margin-top: 2px;
  font-size: var(--iso-fs-caption);
  line-height: 1.45;
  color: var(--iso-text-muted);
  white-space: normal;
}