/* ============================================================================
 * iso2erp 銷售管理模組樣式（UX 規格 v2.0 §5.4）
 * 只補共用元件沒有的東西：信用額度量表、揀貨清單、表格內輸入欄寬、待補貨標籤。
 * 顏色一律用 tokens 與殼定義的變數，不自己發明色票（UX §8.2 對比度 ≥ 4.5:1）。
 * ==========================================================================*/

/* 兩個殼層級的踩雷，採購模組已回報殼作者；本模組同樣受影響，先在自己的檔案裡自救。
 * (1) `.iso-content a { color: var(--iso-brand) }` 特異性高於 `.iso-btn--primary`，
 *     用 <a> 做的主要按鈕會變成紫底紫字（對比 1:1）。
 * (2) HTML 的 hidden 屬性只有 UA 樣式，會被 .iso-btn/.iso-alert/.iso-ai-tag 的
 *     display 蓋掉，「應該藏起來的按鈕」照樣顯示。 */
.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); }
.iso-content [hidden] { display: none !important; }

/* 附件：原生 file input 的按鈕文字由瀏覽器語系決定（會出現英文 Choose File），
 * 全站繁體中文的要求下改用自訂 label 觸發，input 本身保留在無障礙樹裡可鍵盤操作。 */
.sal-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sal-file:focus-visible + .sal-file-label { outline: 2px solid var(--iso-brand); outline-offset: 2px; }

/* 表格內的表單控制項寬度 */
.sal-w-item  { min-width: 220px; }
.sal-w-qty   { max-width: 110px; text-align: end; }
.sal-w-price { max-width: 130px; text-align: end; }

/* 一列操作按鈕不要換行擠開表格 */
.sal-acts { flex-wrap: nowrap; gap: 4px; }

/* 單價欄：輸入框後面還要放 AI 自動填入的紫色圖示，欄位太窄會把圖示擠到下一行。
   桌面／平板給這一格一個下限寬並禁止換行（行動版轉卡片後不需要）。 */
@media (min-width: 768px) {
  #sf-lines td[data-label="單價"] { min-width: 156px; white-space: nowrap; }
  /* 品名、小計、庫存可用量都是短字串，讓它們不要為了讓出寬度而斷成兩行 */
  #sf-lines td[data-label="品名"],
  #sf-lines td[data-label="小計"],
  #sf-lines td[data-label="庫存可用量"] { white-space: nowrap; }
}

/* AI 自動填入的欄位（UX 附錄 D：紫色）—— 表格儲存格裡沒有 .iso-field 包裹，
   所以給一個與共用 .iso-field.is-ai 等效的 class。 */
.sal-ai-input { border-color: var(--iso-ai-border); background: #FDFAFE; }

/* 出貨數量超過未出量／庫存量時的紅框（UX 附錄 A：即時阻擋）*/
.sal-bad-input {
  border-color: var(--iso-danger-fg);
  background: var(--iso-danger-bg);
  color: var(--iso-danger-fg);
  font-weight: 600;
}

/* ── 信用額度量表（PRD §7.6 SA-05）───────────────────────────────── */
.sal-credit { display: flex; flex-direction: column; gap: 6px; }
.sal-credit .iso-progress { height: 12px; }
.sal-credit__nums { display: flex; flex-wrap: wrap; gap: var(--iso-space-3);
  font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }
.sal-credit__nums strong { color: var(--iso-text); }
/* 進度條顏色分三段：安全綠／接近黃／超限紅（雙重編碼：顏色 + 旁邊的文字，UX §8.2）*/
.sal-credit .iso-progress__bar { transition: width .25s ease; }
.sal-credit.is-warn  .iso-progress__bar { background: #C68A00; }
.sal-credit.is-over  .iso-progress__bar { background: var(--iso-danger-fg); }

/* ── 各種行內標籤 ─────────────────────────────────────────────── */
.sal-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: var(--iso-fs-status-tag); font-weight: 500; white-space: nowrap;
}
.sal-tag .ico { width: 13px; height: 13px; }
.sal-tag--overdue { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); border: 1px solid #FFE7A0; }
.sal-tag--backorder { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); border: 1px solid #FFE7A0; }
.sal-tag--credit { background: var(--iso-danger-bg); color: var(--iso-danger-fg); border: 1px solid #F5C6C6; }
.sal-tag--legacy { background: var(--iso-gray-100); color: var(--iso-text-muted); border: 1px solid var(--iso-border); }

/* ── AI 區塊（真的呼叫模型；契約 docs/ISO2ERP_AI_CONTRACT.md）──────────────
 * 來源標籤（.iso-ai-src）與誠實框（.iso-ai-honest）由共用的 iso-ai.css 負責，
 * 這裡只補本模組自己要的東西：卡片頭的右側對齊、綠／黃／紅建議、信用額度列、
 * 風險區、等待進度提示。顏色一律用既有語義 token。
 * 🔴 寫法與 iso-purchase.css 的 .pur-ai-* 那一組刻意保持一致（兩個模組要長一樣）。*/
.sal-ai-head-right { margin-inline-start: auto; }

.sal-verdict {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: var(--iso-radius-md);
  border: 1px solid; margin-bottom: var(--iso-space-3);
  font-size: var(--iso-fs-form-body);
}
.sal-verdict strong { font-weight: 600; }
.sal-verdict .iso-caption { margin-inline-start: auto; }
.sal-verdict.is-green  { background: var(--iso-success-bg); color: var(--iso-success-fg); border-color: var(--iso-success-fg); }
.sal-verdict.is-yellow { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa, #8A5A00); border-color: #C79A2E; }
.sal-verdict.is-red    { background: var(--iso-danger-bg);  color: var(--iso-danger-fg);  border-color: var(--iso-danger-fg); }
.sal-verdict.is-green .iso-caption,
.sal-verdict.is-yellow .iso-caption,
.sal-verdict.is-red .iso-caption { color: inherit; }

/* 信用額度使用率（模型回的 credit_pct，本模組獨有的一列）*/
.sal-ai-credit {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: var(--iso-space-3); padding: 6px 10px;
  border: 1px solid var(--iso-border); border-radius: var(--iso-radius-md);
  background: #fff; font-size: var(--iso-fs-form-body);
}
.sal-ai-credit.is-over {
  border-color: var(--iso-danger-fg); background: var(--iso-danger-bg); color: var(--iso-danger-fg);
}

.sal-ai-risks { margin-top: var(--iso-space-3); }
.sal-ai-risks__title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--iso-warning-fg-aa, #8A5A00);
}

/* 等待模型時的進度提示（UX §6.8：3–10 秒要看得到系統還活著）*/
.sal-ai-progress {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px; font-size: var(--iso-fs-caption); color: var(--iso-text-muted);
}

/* 信心 < 60%：整張卡片標成「待人工處理」（UX 附錄 A）*/
.iso-ai-card.is-low { border-color: var(--iso-danger-fg); }

/* ── AI 揀貨建議清單 ──────────────────────────────────────────── */
.sal-pick { margin: 0 0 var(--iso-space-3); padding-inline-start: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px; counter-reset: pick; }
.sal-pick li {
  display: flex; align-items: center; gap: var(--iso-space-2); flex-wrap: wrap;
  padding: 6px 10px; border: 1px solid var(--iso-ai-border); border-radius: var(--iso-radius-md);
  background: #fff; font-size: var(--iso-fs-form-body);
}
.sal-pick li::before {
  counter-increment: pick; content: counter(pick);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; border-radius: 999px;
  background: var(--iso-ai-bg); color: var(--iso-ai-fg);
  font-size: var(--iso-fs-status-tag); font-weight: 600;
}
.sal-pick__loc { font-family: var(--iso-font-mono); font-weight: 600; color: var(--iso-ai-fg); }
.sal-pick__qty { margin-inline-start: auto; color: var(--iso-text-muted); font-size: var(--iso-fs-caption); }

/* 信用額度總覽表：使用率欄的迷你量表 */
.sal-bar { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; }
/* 🔴 track 與 fill 都要 display:block：<span> 預設是 inline，
 * inline 元素的百分比寬度無效，量表會整條變成 0 寬（實測 getBoundingClientRect().width === 0）。 */
.sal-bar__track { display: block; flex: 1; height: 8px; min-width: 70px; border-radius: 999px;
  background: var(--iso-gray-100); overflow: hidden; }
.sal-bar__fill { display: block; height: 100%; background: var(--iso-success-fg); }
.sal-bar__fill.is-warn { background: #C68A00; }
.sal-bar__fill.is-over { background: var(--iso-danger-fg); }
.sal-bar__pct { font-variant-numeric: tabular-nums; }

/* 行動版（<768px）：表格轉卡片後，輸入框不要被固定寬綁死 */
@media (max-width: 767px) {
  /* 🔴 殼層級踩雷（已在回報清單裡，這裡先自救、不改共用檔）：
   * iso-shell.css 的行動版規則同時給了 `.iso-table tr { width:100%; margin:12px }`，
   * 100% 寬再加左右各 12px 外距 = 溢出容器，.iso-tablewrap 因此長出內層水平捲軸，
   * 卡片右側的值（單價、AI 圖示）會被切掉。實測 scrollWidth 368 / clientWidth 356。 */
  .iso-content .iso-table tr { width: auto; }
  .sal-w-item, .sal-w-qty, .sal-w-price { min-width: 0; max-width: 60%; width: 60%; }
  .sal-acts { flex-wrap: wrap; justify-content: flex-end; }
  .sal-pick__qty { margin-inline-start: 0; width: 100%; }
  .sal-bar { min-width: 0; width: 100%; }
  /* UX §4.2 只說平板隱藏次要欄位、行動轉卡片；卡片沒有寬度壓力，
     所以平板隱掉的欄位（訂單日、AI 標示、規格、儲位）在行動版要回來，
     否則手機上看不到「AI 生成草稿」這個本模組最關鍵的標示。 */
  .iso-table td.sal-show-mobile { display: flex !important; }
  .iso-section__title { white-space: nowrap; }
  .iso-card__head { flex-wrap: wrap; }
}

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

/* 出貨紀錄：單號與日期不要被平均分欄擠到換行 */
#dv-history td[data-label="出貨單號"],
#dv-history td[data-label="銷售訂單號"],
#dv-history td[data-label="出貨日"] { white-space: nowrap; }