/* ============================================================================
 * iso2erp 訪談協作模組樣式（UX 規格 v2.0 §5.6、§9 S02；PRD v2.3 §7.2）
 *
 * 只補共用元件沒有的東西：訪談階段 chip、逐字稿版面、訪綱清單、TBC 填寫面板。
 * 顏色一律取 tokens.css 與殼定義的變數，不自己發明色票（UX §8.2 對比 ≥ 4.5:1）。
 * ==========================================================================*/

/* ── 兩個殼層級的踩雷，沿用其他模組作者的自救寫法（不改共用檔）────────── */

/* 1. `.iso-content a{color:var(--iso-brand)}` 特異性高於 `.iso-btn--primary{color:#fff}`。 */
.iso-content a.iso-btn--primary,
.iso-content a.iso-btn--danger { color: #fff; }
.iso-content a.iso-btn--ghost,
.iso-content a.iso-btn--icon { color: var(--iso-text); }
.iso-content a.iso-btn--secondary { color: var(--iso-brand); }

/* 2. HTML 的 hidden 只有 UA 樣式，會被 .iso-btn{display:inline-flex} 等蓋掉。 */
.iso-content [hidden] { display: none !important; }

/* ── 訪談階段 chip（PRD §7.2 的訪談狀態流轉，共九階）───────────────────
 * 刻意不用 PRD §6 的十種「單據狀態」badge：訪談場次不是單據，
 * 硬套會讓「草稿／已核准」這種單據語意混進來。TBC 項目才是走簽核流轉的
 * 單據，那邊就用共用的 iso-badge。 */
.iv-stage {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: var(--iso-fs-status-tag); font-weight: 500; line-height: var(--iso-lh-status-tag);
}
.iv-stage .ico { width: 12px; height: 12px; }
.iv-stage--neutral { background: var(--iso-gray-100);   color: #4A4A4A; border: 1px solid var(--iso-border); }
.iv-stage--info    { background: var(--iso-info-bg);    color: var(--iso-info-fg); }
.iv-stage--ai      { background: var(--iso-ai-bg);      color: var(--iso-ai-fg); }
.iv-stage--warn    { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); }
.iv-stage--ok      { background: var(--iso-success-bg); color: var(--iso-success-fg); }

/* 階段流轉條（九階太長，桌面橫向捲動，行動改直排）*/
.iv-flow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.iv-flow__step {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--iso-border); background: #fff;
  font-size: var(--iso-fs-caption); color: var(--iso-text-muted);
}
.iv-flow__step[aria-current="step"] {
  background: var(--iso-brand); border-color: var(--iso-brand); color: #fff; font-weight: 500;
}
.iv-flow__step--done { color: var(--iso-success-fg); border-color: var(--iso-success-fg); }
.iv-flow__sep { color: var(--iso-text-muted); }

.iv-sub { display: block; color: var(--iso-text-muted); font-size: var(--iso-fs-caption); }
/* 場次／TBC 編號不要在中間折行 */
.iso-content .iso-table .iso-mono { white-space: nowrap; }
/* 操作欄的圖示鈕排成一列，不要被壓成兩行 */
.iv-acts { flex-wrap: nowrap; }
.iv-num { font-variant-numeric: tabular-nums; }
.iv-danger { color: var(--iso-danger-fg); font-weight: 600; }
.iv-warnfg { color: var(--iso-warning-fg-aa); font-weight: 600; }
.iv-okfg   { color: var(--iso-success-fg); }

/* ── 錄音控制列（本演示未啟用麥克風／ASR，樣式刻意做成「停用」外觀）──── */
.iv-recbar {
  display: flex; align-items: center; gap: var(--iso-space-3); flex-wrap: wrap;
  padding: var(--iso-space-3) var(--iso-space-4);
  border: 1px dashed var(--iso-border); border-radius: var(--iso-radius-lg);
  background: var(--iso-gray-100);
}
.iv-recbar__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #8A8A8A; flex: none;
}
.iv-recbar__label { font-weight: 500; }
.iv-recbar__time { font-family: var(--iso-font-mono); font-size: 20px; color: var(--iso-text-muted); }

/* 本模組的兩個對話框內容比較長（新增訪談要帶訪綱預覽），
 * 共用的 .iso-dialog__body 沒有設捲動，超過視窗高度就會被 UA 的 max-height 切掉。
 * 這裡只針對自己的對話框補上內部捲動，不動共用檔。 */
#iv-new-dlg .iso-dialog__body,
#iv-detail-dlg .iso-dialog__body { max-height: 62vh; overflow-y: auto; }

/* 場次資訊在桌面排成兩欄，讓逐字稿早一點進到第一屏 */
@media (min-width: 1200px) {
  .iv-dl2 { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
}

/* ── 逐字稿 ───────────────────────────────────────────────────────── */
/* 逐字稿（左）與訪綱＋標記（右）。兩欄等高：逐字稿在自己的框裡捲，
 * 這樣頁面不會出現一大塊空白，也不必為了看訪綱把逐字稿捲過去。 */
.iv-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--iso-space-4); align-items: stretch; }
@media (max-width: 1199px) { .iv-split { grid-template-columns: 1fr; } }
.iv-split > .iso-card { display: flex; flex-direction: column; }
.iv-split > .iso-card > .iso-card__body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.iv-script { flex: 1; min-height: 420px; max-height: 1200px; overflow: auto; padding-right: 4px; }
.iv-line {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--iso-space-2); align-items: start;
  padding: var(--iso-space-2) var(--iso-space-2);
  border-bottom: 1px solid var(--iso-border);
}
.iv-line:hover { background: var(--iso-brand-tint); }
.iv-line__t { font-family: var(--iso-font-mono); font-size: var(--iso-fs-caption); color: var(--iso-text-muted); padding-top: 2px; }
.iv-line__who { font-weight: 500; }
.iv-line__who--ba { color: var(--iso-brand); }
.iv-line__text { line-height: 1.7; }
.iv-line__acts { display: flex; gap: 4px; opacity: .35; transition: opacity .15s ease; }
.iv-line:hover .iv-line__acts, .iv-line:focus-within .iv-line__acts { opacity: 1; }
.iv-line.is-marked { background: var(--iso-ai-bg); }
.iv-line.is-marked .iv-line__acts { opacity: 1; }
@media (max-width: 767px) {
  .iv-line { grid-template-columns: 1fr; }
  .iv-line__acts { opacity: 1; }
}

/* 標記 chip（四類：痛點／流程／欄位需求／待確認）*/
.iv-mark {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  font-size: var(--iso-fs-status-tag); font-weight: 500;
  border: 1px solid transparent;
}
.iv-mark .ico { width: 12px; height: 12px; }
.iv-mark--pain  { background: var(--iso-danger-bg);  color: var(--iso-danger-fg); }
.iv-mark--flow  { background: var(--iso-info-bg);    color: var(--iso-info-fg); }
.iv-mark--field { background: var(--iso-success-bg); color: var(--iso-success-fg); }
.iv-mark--tbc   { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); }

/* ── 訪綱（IV-01／IV-02：題目 + 追問提示）─────────────────────────── */
.iv-outline { list-style: none; margin: 0; padding: 0; }
.iv-outline__item {
  padding: var(--iso-space-3) 0; border-bottom: 1px solid var(--iso-border);
}
.iv-outline__item:last-child { border-bottom: 0; }
.iv-outline__no {
  font-family: var(--iso-font-mono); font-size: var(--iso-fs-caption);
  background: var(--iso-brand-tint); color: var(--iso-brand);
  border-radius: var(--iso-radius-sm); padding: 1px 6px; margin-right: 6px;
}
.iv-outline__q { line-height: 1.6; }
.iv-outline__probe { margin: 6px 0 0; padding-left: 18px; color: var(--iso-text-muted); font-size: var(--iso-fs-caption); }
.iv-outline__probe li { margin: 2px 0; }
.iv-outline__item.is-asked .iv-outline__q { text-decoration: line-through; color: var(--iso-text-muted); }
.iv-ask { display: flex; align-items: center; gap: 6px; font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }

/* ── 標記清單 ─────────────────────────────────────────────────────── */
.iv-marklist { list-style: none; margin: 0; padding: 0; }
.iv-marklist li {
  display: grid; grid-template-columns: 56px auto minmax(0, 1fr) auto;
  gap: var(--iso-space-2); align-items: start;
  padding: var(--iso-space-2) 0; border-bottom: 1px solid var(--iso-border);
  font-size: var(--iso-fs-caption);
}
.iv-marklist li:last-child { border-bottom: 0; }
.iv-marklist .iv-mk-t { font-family: var(--iso-font-mono); color: var(--iso-text-muted); }

/* ── 摘要頁：可覆核的條目 ─────────────────────────────────────────── */
.iv-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--iso-space-3); align-items: start;
  padding: var(--iso-space-3) 0; border-bottom: 1px solid var(--iso-border);
}
.iv-item:last-child { border-bottom: 0; }
.iv-item__body { min-width: 0; }
.iv-item__title { line-height: 1.6; }
.iv-item__meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: var(--iso-space-3); font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }
.iv-item.is-low { background: var(--iso-danger-bg); border-radius: var(--iso-radius-md); padding-inline: var(--iso-space-3); }
.iv-item__id { font-family: var(--iso-font-mono); color: var(--iso-text-muted); font-size: var(--iso-fs-caption); }
@media (max-width: 767px) {
  .iv-item { grid-template-columns: auto minmax(0, 1fr); }
  .iv-item > :last-child { grid-column: 1 / -1; }
}

/* 流程步驟鏈 */
.iv-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.iv-steps__s {
  background: var(--iso-gray-100); border: 1px solid var(--iso-border);
  border-radius: var(--iso-radius-sm); padding: 2px 8px; font-size: var(--iso-fs-caption);
}
.iv-steps__arrow { color: var(--iso-text-muted); }

/* 影響程度 */
.iv-impact { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.iv-impact--high { color: var(--iso-danger-fg); }
.iv-impact--mid  { color: var(--iso-warning-fg-aa); }
.iv-impact--low  { color: var(--iso-text-muted); }

/* ── TBC 填寫面板 ─────────────────────────────────────────────────── */
.iv-panel {
  border: 1px solid var(--iso-brand); border-radius: var(--iso-radius-lg);
  background: #fff; box-shadow: var(--iso-shadow-md);
}
.iv-panel__head {
  display: flex; align-items: center; gap: var(--iso-space-2);
  padding: var(--iso-space-3) var(--iso-space-4);
  border-bottom: 1px solid var(--iso-border); background: var(--iso-brand-tint);
  border-radius: var(--iso-radius-lg) var(--iso-radius-lg) 0 0;
  font-weight: 500;
}
.iv-panel__body { padding: var(--iso-space-4); }
/* 唯讀時要看得出來是唯讀（textarea 的唯讀狀態瀏覽器不會自己變灰）*/
.iv-panel [readonly] { background: var(--iso-gray-100); color: var(--iso-text-muted); }
.iv-panel__foot {
  display: flex; flex-wrap: wrap; gap: var(--iso-space-2); align-items: center;
  padding: var(--iso-space-3) var(--iso-space-4);
  border-top: 1px solid var(--iso-border); background: var(--iso-gray-100);
  border-radius: 0 0 var(--iso-radius-lg) var(--iso-radius-lg);
}

/* 逾期標記 */
.iv-overdue {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--iso-danger-fg); font-weight: 600; font-size: var(--iso-fs-caption);
}
.iv-overdue .ico { width: 12px; height: 12px; }

/* 小型統計條（訪談進度）*/
.iv-bar { height: 6px; border-radius: 999px; background: var(--iso-gray-300); overflow: hidden; min-width: 80px; }
.iv-bar__fill { height: 100%; background: var(--iso-brand); }

/* 逐字稿／訪綱欄位在行動版不要被壓爛 */
@media (max-width: 767px) {
  .iv-script { max-height: none; }
  .iv-marklist li { grid-template-columns: 1fr; }

  /* 3. 殼的第三個踩雷（採購／銷售／庫存模組作者都踩過，這裡沿用同一個自救寫法）：
   *    iso-shell.css 的行動版同時給了 `.iso-table tr { width:100%; margin:12px }`，
   *    100% 寬再加左右各 12px 外距 = 溢出容器，.iso-tablewrap 於是長出內層水平捲軸，
   *    卡片右緣的值會被切掉。改成 width:auto 讓外距吃進可用寬度。 */
  .iso-content .iso-table tr { width: auto; }
}