/* ============================================================================
 * iso2erp 庫存管理模組樣式（UX 規格 v2.0 §5.3、§9 S08；PRD v2.3 §7.5）
 *
 * 只補共用元件沒有的東西：庫存水位標示、正負數量、水位條、明細面板。
 * 顏色一律取 tokens.css 與殼定義的變數，不自己發明色票（UX §8.2 對比 ≥ 4.5:1）。
 * ==========================================================================*/

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

/* 1. `.iso-content a{color:var(--iso-brand)}` 特異性高於 `.iso-btn--primary{color:#fff}`，
 *    內容區裡用 <a> 做的主要按鈕會變成紫底紫字（對比 1:1）。 */
.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; }

/* ── 庫存水位標示（本模組自有語意，不是 PRD §6 的單據狀態）────────────
 * 庫存異動是事件驅動、沒有狀態機（PRD §7.5），所以這裡刻意不用 iso-badge 的
 * 十種單據狀態 code，改用自己的水位 chip，避免和單據狀態混淆。 */
.inv-lv {
  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);
}
.inv-lv .ico { width: 12px; height: 12px; }
.inv-lv--ok       { background: var(--iso-success-bg); color: var(--iso-success-fg); }
.inv-lv--warn     { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); }
.inv-lv--critical { background: var(--iso-danger-bg);  color: var(--iso-danger-fg); }
.inv-lv--short    { background: var(--iso-danger-fg);  color: #fff; }

/* 數量（含正負號）。tabular-nums 讓上下對齊。 */
.inv-qty { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.inv-qty--in  { color: var(--iso-success-fg); }
.inv-qty--out { color: var(--iso-danger-fg); }
.inv-qty--adj { color: var(--iso-info-fg); }
.inv-qty .ico { width: 13px; height: 13px; vertical-align: -2px; }

/* 低於安全庫存的可用量：紅字（表格裡一眼看到） */
.inv-num-bad  { color: var(--iso-danger-fg); font-weight: 600; }
.inv-num-warn { color: var(--iso-warning-fg-aa); font-weight: 600; }

/* 表格第二行的小字（品名底下的規格、料號底下的品名） */
.inv-sub { display: block; font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }

/* 備註欄不要把表格撐爆 */
.inv-note { max-width: 260px; font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }

/* 一列操作按鈕不換行 */
.inv-acts { flex-wrap: nowrap; gap: 4px; justify-content: flex-end; }
.inv-acts .iso-btn { white-space: nowrap; }

/* 桌面／平板：這些欄位換行只會讓列高暴增，內容其實都很短 */
@media (min-width: 768px) {
  .iso-table td[data-label="異動時間"],
  .iso-table td[data-label="異動單號"],
  .iso-table td[data-label="單據類型"],
  .iso-table td[data-label="來源單據"],
  .iso-table td[data-label="倉庫"],
  .iso-table td[data-label="異動數量"],
  .iso-table td[data-label="異動後庫存"],
  .iso-table td[data-label="操作人"],
  .iso-table td[data-label="主要庫位"],
  .iso-table td[data-label="可用量"],
  .iso-table td[data-label="安全庫存"],
  .iso-table td[data-label="短缺數量"],
  .iso-table td[data-label="建議採購量"],
  .iso-table td[data-label="預計缺料日"],
  .iso-table td[data-label="AI 信心"],
  .iso-table td[data-label="嚴重度"],
  .iso-table td[data-label="即時庫存"],
  .iso-table td[data-label="在途採購量"],
  .iso-table td[data-label="在途訂單量"] { white-space: nowrap; }
  /* 供應商欄顯示簡稱（完整名稱在 title 與 AI 建議卡片），不需要保留額外寬度 */
  .iso-table td[data-label="建議供應商"] { white-space: nowrap; }
}

/* 安全庫存預警有 11 欄，桌面 1440 寬（內容區 1140）剛好會擠出橫向捲軸：
 * 把左右內距從 12px 收到 8px 就放得下，字級與列高不動（不犧牲可讀性）。 */
@media (min-width: 768px) {
  #inv-alerts .iso-table th,
  #inv-alerts .iso-table td { padding-inline: var(--iso-space-2); }
}

/* 信心 < 60% 的建議：表格裡用小 chip，別用整塊警示框把列撐高（完整說明在下方 AI 卡片） */
.inv-lowconf {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  padding: 2px 6px; border-radius: var(--iso-radius-sm);
  background: var(--iso-danger-bg); color: var(--iso-danger-fg);
  font-size: var(--iso-fs-caption); font-weight: 500; white-space: nowrap;
}
.inv-lowconf .ico { width: 12px; height: 12px; }

/* ── AI 補貨建議：來源與狀態標示 ─────────────────────────────────────────
 * 三種來源（model 紫／cache 藍／rule 黃）的樣式在共用的 iso-ai.css（.iso-ai-src），
 * 這裡只補「表格裡要更小」與「還沒拿到本次判讀」的兩種狀態，不自己發明色票。*/

/* 卡片標題右側：信心分數 + 來源標籤 + 重新分析按鈕
 * 🔴 一定要能換行：來源標籤的長度隨來源而變（「模型即時產生（gemini-3.5-flash）」比
 *    「預存模型輸出」長很多），共用的 .iso-ai-card__head 是 nowrap 的 flex，
 *    行動版 390 寬實測會把整頁撐出 81px 橫向捲軸。只在本頁的卡片上放寬，不動共用檔。*/
#inv-ai-card .iso-ai-card__head { flex-wrap: wrap; }
.inv-ai-head-right { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-ai-head-right .iso-conf { margin-inline-start: 0; }
.inv-ai-head-right .iso-ai-src { white-space: normal; }

/* 表格裡的來源小標，比卡片上的再小一號（一列一個，太大會把列高撐開） */
.inv-ai-src { font-size: var(--iso-fs-caption); padding: 1px 6px; }
.inv-ai-src .ico { width: 12px; height: 12px; }

/* 「AI 信心」欄多了來源標籤，並排會把 11 欄的表格撐出橫向捲軸（1440 實測 +21px），
 * 所以這一欄改成上下兩行：信心分數在上、本次來源在下。 */
.inv-ai-conf { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
@media (min-width: 768px) {
  .iso-table td[data-label="AI 信心"] { white-space: normal; }
}
@media (max-width: 767px) {
  .inv-ai-conf { flex-direction: row; align-items: center; gap: 6px; }
}

/* 還沒拿到本次判讀的兩種狀態：分析中（灰）／上次檢查快照（黃，警告色） */
.inv-ai-state {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  font-size: var(--iso-fs-caption); font-weight: 500;
  border: 1px solid transparent;
}
.inv-ai-state .ico { width: 12px; height: 12px; }
.inv-ai-state .iso-spinner { width: 12px; height: 12px; }
.inv-ai-state.is-pending { background: var(--iso-gray-100); color: var(--iso-text-muted); border-color: var(--iso-gray-300); }
.inv-ai-state.is-stale   { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa, #8A5A00); border-color: #C79A2E; }

/* 誠實框（由 ISO.aiHonest 依本次實際來源填）與卡片內容之間留白 */
#inv-ai-honest:not(:empty) { margin-top: var(--iso-space-3); }

/* 模型要跑好幾秒時的等待提示（UX §6.8：3–10 秒要看得到進度；秒數是真的在數） */
.inv-ai-progress {
  display: flex; align-items: center; gap: 6px; margin-top: var(--iso-space-2);
  font-size: var(--iso-fs-caption); color: var(--iso-ai-fg);
}
.inv-ai-progress .ico { width: 14px; height: 14px; flex: none; }

/* 水位條：可用量相對安全庫存的比例（明細面板用） */
.inv-bar {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--iso-gray-100); overflow: hidden; min-width: 160px;
}
.inv-bar__fill { height: 100%; border-radius: 999px; background: var(--iso-success-fg); }
.inv-bar__fill--warn     { background: #8A5A00; }
.inv-bar__fill--critical { background: var(--iso-danger-fg); }
.inv-bar__fill--short    { background: var(--iso-danger-fg); }
.inv-bar__mark {
  position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--iso-text);
}

/* 明細面板裡的小表格 */
.inv-mini { width: 100%; border-collapse: collapse; font-size: var(--iso-fs-form-body); }
.inv-mini th, .inv-mini td { padding: 6px 8px; border-bottom: 1px solid var(--iso-border); text-align: start; }
.inv-mini th { color: var(--iso-text-muted); font-weight: 500; font-size: var(--iso-fs-caption); }
.inv-mini .iso-num { text-align: end; font-variant-numeric: tabular-nums; }
.inv-mini tr:last-child td { border-bottom: 0; }

/* 自訂日期區間（庫存異動紀錄）：預設收起，選「自訂區間」才出現 */
.inv-range { display: flex; align-items: flex-end; gap: var(--iso-space-3); flex-wrap: wrap;
  padding: var(--iso-space-3) 0 0; }
.inv-range > .ico { margin-bottom: 9px; color: var(--iso-text-muted); }
.inv-range .iso-field { width: 160px; }
.inv-range .iso-label { font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }
/* 日期用文字欄位（type=date 的顯示格式跟著瀏覽器語系走，會出現 08/03/2026，
   違反 UX §6.13 的繁中 YYYY-MM-DD）；格式由共用的 data-format="date" 驗證。 */

/* 建議採購量的公式：等寬、可換行 */
.inv-formula {
  font-family: var(--iso-font-mono); font-size: var(--iso-fs-caption);
  background: var(--iso-gray-100); border-radius: var(--iso-radius-md);
  padding: 6px 8px; display: block; overflow-wrap: anywhere;
}

/* 平板（768–1199px）：欄位多，數字欄縮一點 */
@media (max-width: 1199px) {
  .inv-note { max-width: 160px; }
}

/* 行動（<768px）：表格轉卡片後，平板隱掉的欄位要回來
 * （UX §4.2 只說平板隱藏次要欄位；卡片沒有寬度壓力，藏了反而看不到 AI 標示與供應商） */
@media (max-width: 767px) {
  /* 🔴 殼層級的踩雷（已在自己的檔案裡自救，回報殼作者）：
   * iso-shell.css 的行動版卡片同時給 tr 設了 `width:100%` 與 `margin:12px`，
   * 兩者相加會超出容器，卡片右緣的數值被 .iso-tablewrap 的 overflow 切掉
   * （實測 scrollWidth − clientWidth = 12px，「主倉庫 A」「嚴重不足」都會被切）。
   * 這裡只針對本模組三頁把寬度改回 auto，不動共用檔。 */
  #inv-stock .iso-table tr,
  #inv-moves .iso-table tr,
  #inv-alerts .iso-table tr { width: auto; }

  .iso-table td.inv-show-mobile { display: flex !important; }
  .inv-note { max-width: none; }
  .inv-acts { flex-wrap: wrap; }
  .inv-bar { min-width: 0; }
  .iso-section__title { white-space: nowrap; }
}

@media print {
  .iso-honest, .iso-page__foot, .iso-batchbar, .iso-toolbar, .inv-acts { display: none !important; }
}