/* ============================================================================
 * iso2erp — Odoo 原生殼 + 共用元件
 *
 * 規格來源：ISO2ERP UX 規格書 v2.0
 *   §1.2 Odoo 框架遵循（頂部 App 切換器 + 左側摺疊選單、表單/列表視圖、按鈕位置、Badge）
 *   §2 色彩 · §3 字體與間距 · §4 響應式 · §6 互動行為 · §8 無障礙 · 附錄 D AI 視覺標示
 * 色票一律取 tokens.css 的 --iso-*，這裡不再寫死 hex（例外：加深 10%/20% 的衍生色）。
 *
 * 🔴 這是共用檔。模組作者不可修改，只能在 static/css/iso-<module>.css 增補。
 * ==========================================================================*/

:root {
  /* UX §6.6 微互動：主要按鈕 hover 加深 10%、active 加深 20%（對品牌色做等比加深）*/
  --iso-brand-hover:   #0E6A63;
  --iso-brand-active:  #0C5E58;
  --iso-danger-hover:  #B22424;
  --iso-danger-active: #9E2020;
  --iso-topbar-h:      46px;
  --iso-row-hover:     #F0FDFA;   /* UX §6.6 表格列 hover（值隨品牌色改 Teal，見 tokens.css A1）*/

  /* 🔴 UX 規格內部打架：§2.2 說「含文字色彩，確保對比度 ≥ 4.5:1」，但它給的
   *   警告字色 #B8770A 落在警告底 #FFF8E1 上只有 3.48:1；已取消的 #999999
   *   落在 #F5F5F5 上只有 2.61:1。§8.2 明訂 WCAG 2.1 AA ≥ 4.5:1，
   *   兩者衝突時以「無障礙硬需求」為準，只把「小字」加深到最接近的同色相值：
   *     #8A5A00 on #FFF8E1 = 5.58:1（原 3.48）
   *     已取消改用 --iso-text-muted #666666 on #F5F5F5 = 5.27:1（原 2.61）
   *   底色、圖示色、其他四種語義色一律不動（成功 4.56／錯誤 4.92／資訊 5.03／AI 7.75 都已達標）。
   *   實測方式見 docs/ISO2ERP_SHELL_CONTRACT.md「驗證」一節。*/
  --iso-warning-fg-aa: #8A5A00;
}

/* ── 0. 基礎 ────────────────────────────────────────────────────────── */

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

html.iso-html, body.iso-body {
  margin: 0;
  padding: 0;
  font-family: var(--iso-font-sans);
  font-size: var(--iso-fs-form-body);
  line-height: var(--iso-lh-form-body);
  color: var(--iso-text);
  background: var(--iso-gray-100);
  -webkit-font-smoothing: antialiased;
}

.iso-app { min-height: 100vh; }

.iso-app h1, .iso-app h2, .iso-app h3, .iso-app h4 { margin: 0; font-weight: 500; }
/* 只給內容區的連結上品牌色：頂部列與側欄的連結各有自己的顏色，
 * 用 .iso-app a 會因為選擇器權重反過來壓過它們（紫字壓在紫底上就看不見了）。
 *
 * 🔴 修正（shell v1.1，四個模組各自回報）：原本寫 `.iso-content a`，特異性 (0,1,1)
 *   壓過 `.iso-btn--primary { color:#fff }` (0,1,0)，於是內容區裡凡是用 <a> 做的
 *   主要／危險按鈕都變成紫底紫字、紅底紅字，對比 1.00:1 等於看不見。
 *   `:not()` 本身不加權重（取括號內最高者），所以 `a:not(.iso-btn)` 仍是 (0,1,1)、
 *   不會反過來壓到頂部列與側欄，但按鈕直接不落在這條規則裡，改由 .iso-btn--* 決定字色。*/
.iso-content a:not(.iso-btn) { color: var(--iso-brand); }

/* 🔴 hidden 屬性一定要贏（shell v1.1）：UA 樣式的 `[hidden]{display:none}` 特異性是 (0,0,0)，
 * 會被 `.iso-btn{display:inline-flex}`、`.iso-alert{display:flex}`、`.iso-ai-tag{display:inline-flex}`
 * 這些 (0,1,0) 的元件規則蓋掉，於是 `el.hidden = true` 的元素照樣顯示。
 * 這條放在最前面、用 !important 一次解決（殼與模組的 JS 一律用 .hidden 屬性切換，
 * 沒有任何地方靠 style.display 覆寫它，實測過）。*/
[hidden] { display: none !important; }

/* 圖示：一律 lucide <symbol> + <use>，UX §8.3 禁用 Emoji 當功能圖示 */
.ico {
  width: 16px; height: 16px;
  flex: none;
  vertical-align: -3px;
  stroke: currentColor;
  fill: none;
}
.ico--sm { width: 14px; height: 14px; }
.ico--lg { width: 20px; height: 20px; }
.ico--xl { width: 24px; height: 24px; }

/* 只給螢幕閱讀器 */
.iso-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* UX §8.1 鍵盤導航：焦點一定要看得見 */
.iso-app :focus-visible {
  outline: 2px solid var(--iso-brand);
  outline-offset: 2px;
}
.iso-topbar :focus-visible { outline-color: #fff; }

/* ── 1. 頂部列（Odoo navbar）────────────────────────────────────────── */

.iso-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--iso-space-2);
  height: var(--iso-topbar-h);
  padding: 0 var(--iso-space-3);
  background: var(--iso-brand);
  color: #fff;
}
.iso-topbar__burger,
.iso-topbar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 34px; height: 34px;
  padding: 0 8px;
  border: 0; border-radius: var(--iso-radius-md);
  background: transparent; color: #fff;
  font: inherit; font-size: var(--iso-fs-form-body);
  cursor: pointer;
}
.iso-topbar__btn:hover,
.iso-topbar__burger:hover { background: rgba(255,255,255,.16); }
.iso-topbar__btn:active { background: rgba(255,255,255,.26); transform: scale(.98); }
.iso-topbar__burger { display: none; }

.iso-topbar__brand {
  display: inline-flex; align-items: center; gap: var(--iso-space-2);
  font-size: var(--iso-fs-module-title); font-weight: 500;
  color: #fff; text-decoration: none;
  padding: 0 var(--iso-space-2);
}
.iso-topbar__sep {
  width: 1px; height: 22px; margin: 0 var(--iso-space-1);
  background: rgba(255,255,255,.28);
}
.iso-topbar__module { font-size: var(--iso-fs-form-body); color: rgba(255,255,255,.92); }
.iso-topbar__spacer { flex: 1 1 auto; }
.iso-topbar__company {
  font-size: var(--iso-fs-caption); color: rgba(255,255,255,.92);
  white-space: nowrap;
}

/* App 切換器下拉（Odoo 的九宮格）*/
.iso-dropdown { position: relative; }
.iso-dropdown__panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  display: none;
  min-width: 260px;
  padding: var(--iso-space-2);
  background: var(--iso-surface);
  color: var(--iso-text);
  border: 1px solid var(--iso-border);
  border-radius: var(--iso-radius-lg);
  box-shadow: var(--iso-shadow-lg);
}
.iso-dropdown__panel--left { right: auto; left: 0; }
.iso-dropdown.is-open .iso-dropdown__panel { display: block; }

.iso-apps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--iso-space-1);
  width: 330px; max-width: 78vw;
}
.iso-apps__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--iso-space-3) var(--iso-space-2);
  border-radius: var(--iso-radius-lg);
  color: var(--iso-text); text-decoration: none;
  text-align: center; font-size: var(--iso-fs-caption); line-height: 1.35;
}
.iso-apps__item:hover { background: var(--iso-brand-tint); }
.iso-apps__item[aria-current="true"] { background: var(--iso-brand-tint); color: var(--iso-brand); font-weight: 500; }
.iso-apps__item .ico { width: 22px; height: 22px; color: var(--iso-brand); }

/* ── 2. 通知中心（UX §6.11）──────────────────────────────────────────── */

.iso-bell { position: relative; }
.iso-bell__dot {
  position: absolute; top: 4px; right: 4px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px;
  background: var(--iso-danger-fg); color: #fff;
  font-size: 10px; line-height: 15px; font-weight: 700; text-align: center;
}
.iso-bell__dot[hidden] { display: none; }

.iso-notif { width: 340px; max-width: 88vw; padding: 0; }
.iso-notif__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--iso-space-3) var(--iso-space-3) var(--iso-space-2);
  border-bottom: 1px solid var(--iso-border);
  font-weight: 500;
}
.iso-notif__list { max-height: 340px; overflow-y: auto; }
.iso-notif__item {
  display: flex; gap: var(--iso-space-2);
  padding: var(--iso-space-3);
  border-bottom: 1px solid var(--iso-gray-100);
  border-left: 3px solid transparent;
  cursor: pointer;
  background: none; border-top: 0; border-right: 0;
  width: 100%; text-align: start; font: inherit; color: inherit;
}
.iso-notif__item:hover { background: var(--iso-brand-tint); }
.iso-notif__item.is-unread { font-weight: 700; }
.iso-notif__item .ico { margin-top: 2px; }
.iso-notif__item--approval { border-left-color: var(--iso-info-fg); }
.iso-notif__item--approval .ico { color: var(--iso-info-fg); }
.iso-notif__item--alert { border-left-color: var(--iso-warning-fg); }
.iso-notif__item--alert .ico { color: var(--iso-warning-fg-aa); }
.iso-notif__item--system { border-left-color: var(--iso-text-disabled); }
.iso-notif__item--system .ico { color: var(--iso-text-muted); }
.iso-notif__item--ai { border-left-color: var(--iso-ai-fg); }
.iso-notif__item--ai .ico { color: var(--iso-ai-fg); }
.iso-notif__text { min-width: 0; }
.iso-notif__time {
  display: block; margin-top: 2px;
  font-size: var(--iso-fs-caption); font-weight: 400; color: var(--iso-text-muted);
}
.iso-notif__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--iso-space-2) var(--iso-space-3);
  border-top: 1px solid var(--iso-border);
}
.iso-notif__foot a { color: var(--iso-brand); }

/* ── 3. 版面：側欄 + 內容（UX §4.1）──────────────────────────────────── */

.iso-layout { display: flex; align-items: stretch; min-height: calc(100vh - var(--iso-topbar-h)); }

.iso-sidebar {
  flex: none;
  width: var(--iso-sidebar-w);
  background: var(--iso-surface);
  border-right: 1px solid var(--iso-border);
  padding: var(--iso-space-3) 0;
  overflow-y: auto;
  position: sticky; top: var(--iso-topbar-h);
  max-height: calc(100vh - var(--iso-topbar-h));
}
.iso-sidebar__group {
  padding: var(--iso-space-3) var(--iso-space-4) var(--iso-space-1);
  font-size: var(--iso-fs-caption); font-weight: 500;
  color: var(--iso-text-muted); text-transform: none; letter-spacing: .02em;
}
.iso-sidebar__link {
  display: flex; align-items: center; gap: var(--iso-space-3);
  padding: 9px var(--iso-space-4);
  color: var(--iso-text); text-decoration: none;
  font-size: var(--iso-fs-form-body);
  border-left: 3px solid transparent;
}
.iso-sidebar__link:hover { background: var(--iso-brand-tint); }
.iso-sidebar__link[aria-current="page"] {
  background: var(--iso-brand-tint);
  border-left-color: var(--iso-brand);
  color: var(--iso-brand); font-weight: 500;
}
.iso-sidebar__link .ico { color: var(--iso-text-muted); }
.iso-sidebar__link[aria-current="page"] .ico { color: var(--iso-brand); }
.iso-sidebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iso-sidebar__foot {
  margin-top: var(--iso-space-4);
  padding: var(--iso-space-3) var(--iso-space-4);
  border-top: 1px solid var(--iso-border);
  font-size: var(--iso-fs-caption); color: var(--iso-text-muted);
  line-height: 2;
}
.iso-sidebar__foot a {
  color: var(--iso-text-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.iso-sidebar__foot a:hover { color: var(--iso-brand); }
.iso-scrim { display: none; }

.iso-content {
  flex: 1 1 auto; min-width: 0;
  padding: var(--iso-page-padding);
}

/* 麵包屑 */
.iso-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--iso-space-2);
  font-size: var(--iso-fs-caption); color: var(--iso-text-muted);
}
.iso-breadcrumb a { color: var(--iso-text-muted); text-decoration: none; }
.iso-breadcrumb a:hover { color: var(--iso-brand); text-decoration: underline; }
.iso-breadcrumb .ico { width: 12px; height: 12px; color: var(--iso-text-disabled); }
.iso-breadcrumb__current { color: var(--iso-text); }

/* 頁面標題列：主要操作在右（UX §1.2）*/
.iso-page__head {
  display: flex; align-items: flex-start; gap: var(--iso-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--iso-space-4);
}
.iso-page__titlebox { min-width: 0; flex: 1 1 320px; }
.iso-page__title {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--iso-space-2);
  font-size: var(--iso-fs-page-title);
  font-weight: var(--iso-fw-page-title);
  line-height: var(--iso-lh-page-title);
}
.iso-page__subtitle {
  margin-top: var(--iso-space-1);
  font-size: var(--iso-fs-caption); color: var(--iso-text-muted);
}
.iso-page__actions {
  display: flex; align-items: center; gap: var(--iso-space-2); flex-wrap: wrap;
  margin-inline-start: auto;
}
/* 次要操作放底部（UX §1.2）*/
.iso-page__foot {
  display: flex; align-items: center; gap: var(--iso-space-2); flex-wrap: wrap;
  margin-top: var(--iso-space-6);
  padding-top: var(--iso-space-4);
  border-top: 1px solid var(--iso-border);
}

/* ── 4. 按鈕（UX §6.1／§6.6）─────────────────────────────────────────── */

.iso-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 6px 14px;
  border: 1px solid transparent; border-radius: var(--iso-radius-md);
  background: var(--iso-surface); color: var(--iso-text);
  font: inherit; font-size: var(--iso-fs-form-body); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background-color .12s ease, transform .06s ease, border-color .12s ease;
}
.iso-btn--primary { background: var(--iso-brand); color: #fff; }
.iso-btn--primary:hover { background: var(--iso-brand-hover); }
.iso-btn--primary:active { background: var(--iso-brand-active); transform: scale(.98); }

.iso-btn--secondary { background: var(--iso-surface); color: var(--iso-brand); border-color: var(--iso-brand); }
.iso-btn--secondary:hover { border-color: var(--iso-brand-active); background: var(--iso-brand-tint); }
.iso-btn--secondary:active { background: var(--iso-brand-tint); border-color: var(--iso-brand-active); transform: scale(.98); }

.iso-btn--ghost { background: transparent; color: var(--iso-text); border-color: var(--iso-border); }
.iso-btn--ghost:hover { background: var(--iso-gray-100); border-color: var(--iso-text-disabled); }
.iso-btn--ghost:active { transform: scale(.98); }

.iso-btn--danger { background: var(--iso-danger-fg); color: #fff; }
.iso-btn--danger:hover { background: var(--iso-danger-hover); }
.iso-btn--danger:active { background: var(--iso-danger-active); transform: scale(.98); }

.iso-btn--icon { min-width: 32px; padding: 6px; border-color: var(--iso-border); }
.iso-btn--sm { min-height: 28px; padding: 4px 10px; font-size: var(--iso-fs-caption); }

.iso-btn[disabled],
.iso-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* ── 5. 卡片、分區（Odoo 表單視圖的單頁分區）────────────────────────── */

.iso-card {
  background: var(--iso-surface);
  border: 1px solid var(--iso-border);
  border-radius: var(--iso-radius-lg);
  box-shadow: var(--iso-shadow-sm);
}
.iso-card__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);
  font-size: var(--iso-fs-module-title); font-weight: 500;
}
.iso-card__body { padding: var(--iso-space-4); }
.iso-card a { text-decoration: none; }
.iso-card a:hover { text-decoration: underline; }
.iso-card__foot {
  padding: var(--iso-space-3) var(--iso-space-4);
  border-top: 1px solid var(--iso-border);
  background: var(--iso-gray-100);
}

.iso-section { margin-bottom: var(--iso-space-6); }
.iso-section__head {
  display: flex; align-items: center; gap: var(--iso-space-2);
  margin-bottom: var(--iso-space-3);
  padding-bottom: var(--iso-space-2);
  border-bottom: 1px solid var(--iso-border);
}
.iso-section__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--iso-brand); color: #fff;
  font-size: var(--iso-fs-caption); font-weight: 700;
}
.iso-section__title { font-size: var(--iso-fs-module-title); font-weight: 500; }
.iso-section__hint { font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }

/* KPI 卡（UX §4.2：桌面 4 列／平板 2 列／行動 1 列）*/
.iso-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--iso-space-4); }
.iso-kpi {
  padding: var(--iso-space-4);
  background: var(--iso-surface);
  border: 1px solid var(--iso-border);
  border-radius: var(--iso-radius-lg);
}
.iso-kpi__label { font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }
.iso-kpi__value { margin-top: 4px; font-size: var(--iso-fs-page-title); font-weight: 700; }
.iso-kpi__hint { margin-top: 2px; font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }

/* ── 6. 表單（UX §6.2／§6.6；§4.2 雙欄 → 單欄）─────────────────────── */

.iso-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--iso-space-4); }
.iso-form--one { grid-template-columns: minmax(0, 1fr); }
.iso-field--full { grid-column: 1 / -1; }

.iso-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.iso-label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--iso-fs-form-label); font-weight: var(--iso-fw-form-label);
  color: var(--iso-text);
}
.iso-label__req { color: var(--iso-danger-fg); }

.iso-input, .iso-select, .iso-textarea {
  width: 100%;
  min-height: 34px; padding: 6px 10px;
  border: 1px solid var(--iso-border); border-radius: var(--iso-radius-md);
  background: var(--iso-surface); color: var(--iso-text);
  font: inherit; font-size: var(--iso-fs-form-body);
}
.iso-textarea { min-height: 88px; resize: vertical; }
.iso-input:focus, .iso-select:focus, .iso-textarea:focus {
  outline: none;
  border-color: var(--iso-brand);
  box-shadow: var(--iso-shadow-focus);          /* UX §6.6 focus glow */
}
.iso-input[readonly], .iso-input[disabled],
.iso-select[disabled], .iso-textarea[disabled] {
  background: var(--iso-gray-100); color: var(--iso-text-muted);
}
.iso-input[disabled], .iso-select[disabled], .iso-textarea[disabled] { opacity: .5; }

.iso-field.is-invalid .iso-input,
.iso-field.is-invalid .iso-select,
.iso-field.is-invalid .iso-textarea {
  border-color: var(--iso-danger-fg);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .16);
}
.iso-field__error {
  display: none; align-items: center; gap: 4px;
  font-size: var(--iso-fs-caption); color: var(--iso-danger-fg);
}
.iso-field.is-invalid .iso-field__error { display: flex; }
.iso-field__hint { font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }
/* 去重檢查提示（UX §6.2）*/
.iso-field__dupe {
  display: none; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: var(--iso-radius-md);
  background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa);
  font-size: var(--iso-fs-caption);
}
.iso-field.is-dupe .iso-field__dupe { display: flex; }

.iso-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.iso-check input { width: 16px; height: 16px; accent-color: var(--iso-brand); }

/* 唯讀資訊列（表單視圖常用）*/
.iso-readonly { font-size: var(--iso-fs-form-body); padding: 7px 0; }

/* ── 7. 列表視圖（搜尋／過濾／分頁／匯出）───────────────────────────── */

.iso-toolbar {
  display: flex; align-items: center; gap: var(--iso-space-2); flex-wrap: wrap;
  padding: var(--iso-space-3);
  background: var(--iso-surface);
  border: 1px solid var(--iso-border); border-bottom: 0;
  border-radius: var(--iso-radius-lg) var(--iso-radius-lg) 0 0;
}
.iso-search { position: relative; flex: 1 1 260px; min-width: 180px; }
.iso-search .ico {
  position: absolute; inset-inline-start: 9px; top: 50%; transform: translateY(-50%);
  color: var(--iso-text-muted); pointer-events: none;
}
.iso-search .iso-input { padding-inline-start: 30px; }
.iso-toolbar__spacer { flex: 1 1 auto; }
.iso-select--filter { width: auto; min-width: 130px; }

.iso-tablewrap {
  background: var(--iso-surface);
  border: 1px solid var(--iso-border);
  border-radius: 0 0 var(--iso-radius-lg) var(--iso-radius-lg);
  overflow-x: auto;
}
.iso-table { width: 100%; border-collapse: collapse; font-size: var(--iso-fs-form-body); }
.iso-table th {
  position: sticky; top: 0;
  padding: 10px var(--iso-space-3);
  background: var(--iso-gray-100);
  border-bottom: 1px solid var(--iso-border);
  font-size: var(--iso-fs-caption); font-weight: 500; color: var(--iso-text-muted);
  text-align: start; white-space: nowrap;
}
.iso-table td {
  padding: 10px var(--iso-space-3);
  border-bottom: 1px solid var(--iso-gray-100);
  vertical-align: middle;
}
.iso-table tbody tr:hover { background: var(--iso-row-hover); }   /* UX §6.6 */
.iso-table tbody tr.is-selected { background: var(--iso-brand-tint); }
.iso-table .iso-num { text-align: end; font-variant-numeric: tabular-nums; }
.iso-table__check { width: 38px; }
.iso-table a { text-decoration: none; }
.iso-table a:hover { text-decoration: underline; }

.iso-pager {
  display: flex; align-items: center; gap: var(--iso-space-2);
  padding: var(--iso-space-3);
  border-top: 1px solid var(--iso-border);
  font-size: var(--iso-fs-caption); color: var(--iso-text-muted);
}
.iso-pager__spacer { flex: 1 1 auto; }

/* 批次操作列（UX §6.5）*/
.iso-batchbar {
  display: none; align-items: center; gap: var(--iso-space-2); flex-wrap: wrap;
  padding: var(--iso-space-2) var(--iso-space-3);
  background: var(--iso-brand-tint);
  border: 1px solid var(--iso-border); border-bottom: 0;
  font-size: var(--iso-fs-form-body);
}
.iso-batchbar.is-on { display: flex; }
.iso-batchbar__count { font-weight: 500; color: var(--iso-brand); }

/* ── 8. 狀態 Badge（PRD §6 狀態字典的十種）──────────────────────────── */

.iso-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--iso-fs-status-tag);
  font-weight: var(--iso-fw-status-tag);
  line-height: var(--iso-lh-status-tag);
  white-space: nowrap;
}
.iso-badge .ico { width: 12px; height: 12px; }
.iso-badge--draft     { background: var(--iso-gray-100);   color: var(--iso-text-muted); }
.iso-badge--review    { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); }
.iso-badge--approved  { background: var(--iso-info-bg);    color: var(--iso-info-fg); }
.iso-badge--rejected  { background: var(--iso-danger-bg);  color: var(--iso-danger-fg); }
.iso-badge--sent      { background: var(--iso-info-bg);    color: var(--iso-info-fg); }
.iso-badge--partial   { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); }
.iso-badge--done      { background: var(--iso-success-bg); color: var(--iso-success-fg); }
.iso-badge--canceled  { background: var(--iso-gray-100);   color: var(--iso-text-muted); }
.iso-badge--active    { background: var(--iso-success-bg); color: var(--iso-success-fg); }
.iso-badge--inactive  { background: var(--iso-danger-bg);  color: var(--iso-danger-fg); }
.iso-badge--ai        { background: var(--iso-ai-bg);      color: var(--iso-ai-fg); }
.iso-badge--neutral   { background: var(--iso-gray-100);   color: var(--iso-text-muted); }

/* Odoo 風格的狀態流轉列（statusbar pipeline）*/
.iso-statusbar { display: flex; flex-wrap: wrap; gap: 2px; }
.iso-statusbar__step {
  padding: 4px 14px;
  background: var(--iso-gray-100); color: var(--iso-text-muted);
  border: 1px solid var(--iso-border);
  font-size: var(--iso-fs-status-tag);
}
.iso-statusbar__step:first-child { border-radius: 999px 0 0 999px; }
.iso-statusbar__step:last-child { border-radius: 0 999px 999px 0; }
.iso-statusbar__step[aria-current="step"] {
  background: var(--iso-brand); color: #fff; border-color: var(--iso-brand);
  font-weight: 500;
}

/* ── 9. 訊息（UX §6.7 五種層級）與 Toast（§6.1）─────────────────────── */

.iso-alert {
  display: flex; align-items: flex-start; gap: var(--iso-space-2);
  padding: var(--iso-space-3);
  border: 1px solid transparent; border-radius: var(--iso-radius-md);
  font-size: var(--iso-fs-form-body);
  margin-bottom: var(--iso-space-3);
}
.iso-alert__body { flex: 1 1 auto; min-width: 0; }
.iso-alert__title { font-weight: 500; }
.iso-alert__close {
  flex: none; border: 0; background: transparent; color: inherit;
  cursor: pointer; padding: 2px; border-radius: var(--iso-radius-sm); opacity: .75;
}
.iso-alert__close:hover { opacity: 1; background: rgba(0,0,0,.06); }
.iso-alert--success { background: var(--iso-success-bg); color: var(--iso-success-fg); border-color: #C8E6C9; }
.iso-alert--warning { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); border-color: #FFE7A0; }
.iso-alert--error   { background: var(--iso-danger-bg);  color: var(--iso-danger-fg);  border-color: #FFCDD2; }
.iso-alert--info    { background: var(--iso-info-bg);    color: var(--iso-info-fg);    border-color: #BBDEFB; }
.iso-alert--ai      { background: var(--iso-ai-bg);      color: var(--iso-ai-fg);      border-color: var(--iso-ai-border); }

.iso-toasts {
  position: fixed; top: calc(var(--iso-topbar-h) + 12px); left: 50%; transform: translateX(-50%);
  z-index: 80;
  display: flex; flex-direction: column; gap: var(--iso-space-2);
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}
.iso-toast {
  display: flex; align-items: flex-start; gap: var(--iso-space-2);
  padding: 10px var(--iso-space-3);
  border-radius: var(--iso-radius-md);
  border: 1px solid transparent;
  box-shadow: var(--iso-shadow-md);
  font-size: var(--iso-fs-form-body);
  pointer-events: auto;
  animation: iso-toast-in .18s ease-out;
}
.iso-toast.is-out { opacity: 0; transition: opacity .2s ease; }
@keyframes iso-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .iso-toast { animation: none; }
  .iso-btn, .iso-topbar__btn { transition: none; }
}
.iso-toast--success { background: var(--iso-success-bg); color: var(--iso-success-fg); border-color: #C8E6C9; }
.iso-toast--warning { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); border-color: #FFE7A0; }
.iso-toast--error   { background: var(--iso-danger-bg);  color: var(--iso-danger-fg);  border-color: #FFCDD2; }
.iso-toast--info    { background: var(--iso-info-bg);    color: var(--iso-info-fg);    border-color: #BBDEFB; }
.iso-toast--ai      { background: var(--iso-ai-bg);      color: var(--iso-ai-fg);      border-color: var(--iso-ai-border); }

/* Spinner（UX §6.1 資料載入中）*/
.iso-spinner {
  display: inline-block; width: 16px; height: 16px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 999px;
  animation: iso-spin .7s linear infinite;
  vertical-align: -3px;
}
.iso-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes iso-spin { to { transform: rotate(360deg); } }
.iso-loading {
  display: flex; align-items: center; justify-content: center; gap: var(--iso-space-2);
  padding: var(--iso-space-8);
  color: var(--iso-text-muted);
}

/* 進度條（UX §6.8 3–10 秒場景）*/
.iso-progress {
  height: 6px; border-radius: 999px; background: var(--iso-gray-300); overflow: hidden;
}
.iso-progress__bar { height: 100%; background: var(--iso-brand); border-radius: 999px; }

/* ── 10. 空狀態（UX §6.10）──────────────────────────────────────────── */

.iso-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--iso-space-2);
  padding: var(--iso-space-8) var(--iso-space-4);
  text-align: center; color: var(--iso-text-muted);
}
.iso-empty .ico { width: 40px; height: 40px; color: var(--iso-gray-300); stroke-width: 1.5; }
.iso-empty__title { font-size: var(--iso-fs-module-title); color: var(--iso-text); }
.iso-empty__hint { font-size: var(--iso-fs-caption); }

/* ── 11. 對話框（UX §6.4，用原生 <dialog> 以取得 Esc 與焦點管理）───── */

.iso-dialog {
  width: var(--iso-modal-w); max-width: calc(100vw - 32px);
  padding: 0; border: 0;
  border-radius: var(--iso-radius-xl);
  box-shadow: var(--iso-shadow-lg);
  color: var(--iso-text); font-family: var(--iso-font-sans);
}
.iso-dialog::backdrop { background: rgba(17, 12, 16, .45); }
.iso-dialog__head {
  display: flex; align-items: center; gap: var(--iso-space-2);
  padding: var(--iso-space-4) var(--iso-space-4) var(--iso-space-2);
  font-size: var(--iso-fs-module-title); font-weight: 500;
}
.iso-dialog__body { padding: 0 var(--iso-space-4) var(--iso-space-4); font-size: var(--iso-fs-form-body); }
.iso-dialog__foot {
  display: flex; justify-content: flex-end; gap: var(--iso-space-2);
  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-xl) var(--iso-radius-xl);
}

/* ── 12. AI 標示（UX 附錄 D；顏色一律紫，圖示一律 lucide）──────────── */

.iso-ai-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--iso-ai-bg); color: var(--iso-ai-fg);
  border: 1px solid var(--iso-ai-border);
  font-size: var(--iso-fs-ai-label); font-weight: 500;
  line-height: var(--iso-lh-ai-label);
}
.iso-ai-tag .ico { width: 13px; height: 13px; }

/* AI 自動填入欄位圖示（滑鼠懸停顯示說明 → 用 title 屬性）*/
.iso-ai-mark {
  display: inline-flex; align-items: center;
  color: var(--iso-ai-fg); cursor: help;
}
.iso-field.is-ai .iso-input,
.iso-field.is-ai .iso-select { border-color: var(--iso-ai-border); background: #FDFAFE; }

/* AI 審核建議卡片 + 信心分數 */
.iso-ai-card {
  border: 1px solid var(--iso-ai-border);
  border-radius: var(--iso-radius-lg);
  background: var(--iso-ai-bg);
  margin-bottom: var(--iso-space-4);
}
.iso-ai-card__head {
  display: flex; align-items: center; gap: var(--iso-space-2);
  padding: var(--iso-space-3) var(--iso-space-4);
  color: var(--iso-ai-fg); font-weight: 500;
}
.iso-ai-card__body {
  padding: var(--iso-space-3) var(--iso-space-4);
  background: var(--iso-surface);
  border-top: 1px solid var(--iso-ai-border);
  border-radius: 0 0 var(--iso-radius-lg) var(--iso-radius-lg);
}
.iso-ai-card__list { margin: 0; padding-inline-start: 18px; }
.iso-ai-card__list li { margin: 4px 0; }
.iso-ai-card__note {
  margin-top: var(--iso-space-2);
  font-size: var(--iso-fs-caption); color: var(--iso-text-muted);
}
.iso-conf {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--iso-fs-status-tag); font-weight: 500;
  margin-inline-start: auto;
}
.iso-conf--high { background: var(--iso-success-bg); color: var(--iso-success-fg); }
.iso-conf--mid  { background: var(--iso-warning-bg); color: var(--iso-warning-fg-aa); }
.iso-conf--low  { background: var(--iso-danger-bg);  color: var(--iso-danger-fg); }

/* AI 異常標記（附錄 D：紅框 + 原因）*/
.iso-ai-flag {
  border: 1px solid var(--iso-danger-fg);
  border-radius: var(--iso-radius-md);
  background: var(--iso-danger-bg);
  padding: var(--iso-space-2) var(--iso-space-3);
  color: var(--iso-danger-fg);
  font-size: var(--iso-fs-caption);
  display: flex; align-items: center; gap: 6px;
}
.iso-field.is-ai-flagged .iso-input { border-color: var(--iso-danger-fg); background: var(--iso-danger-bg); }

/* AI 輔助開關 */
.iso-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.iso-switch input { width: 16px; height: 16px; accent-color: var(--iso-ai-fg); }

/* ── 13. 分頁籤（Odoo notebook）─────────────────────────────────────── */

.iso-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--iso-border); margin-bottom: var(--iso-space-4); }
.iso-tab {
  padding: 8px 14px; border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  font: inherit; color: var(--iso-text-muted); cursor: pointer;
}
.iso-tab:hover { color: var(--iso-brand); }
.iso-tab[aria-selected="true"] { color: var(--iso-brand); border-bottom-color: var(--iso-brand); font-weight: 500; }
.iso-tabpanel[hidden] { display: none; }

/* ── 14. 雜項 ───────────────────────────────────────────────────────── */

.iso-muted { color: var(--iso-text-muted); }
.iso-caption { font-size: var(--iso-fs-caption); color: var(--iso-text-muted); }
.iso-mono { font-family: var(--iso-font-mono); font-size: var(--iso-fs-caption); }
.iso-stack > * + * { margin-top: var(--iso-space-4); }
.iso-row { display: flex; align-items: center; gap: var(--iso-space-2); flex-wrap: wrap; }
.iso-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--iso-space-4); }
.iso-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--iso-space-4); }
.iso-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--iso-space-4); margin: 0; }
.iso-dl dt { color: var(--iso-text-muted); font-size: var(--iso-fs-caption); }
.iso-dl dd { margin: 0; }

/* 誠實標示：尚未實作 / 示範資料。不可被模組作者拿掉 */
.iso-honest {
  display: flex; align-items: flex-start; gap: var(--iso-space-2);
  padding: var(--iso-space-3);
  border: 1px dashed var(--iso-gray-300);
  border-radius: var(--iso-radius-md);
  background: var(--iso-gray-100);
  color: var(--iso-text-muted);
  font-size: var(--iso-fs-caption);
}

/* ── 15. 響應式（UX §4.1）────────────────────────────────────────────
 * 桌面 ≥1200px：側欄 250px 展開
 * 平板 768–1199px：側欄摺疊為 64px 圖示
 * 行動 <768px：側欄藏進漢堡選單，表格轉卡片
 * ------------------------------------------------------------------- */

/* 只在平板（768–1199px）隱藏，行動版要照常顯示（shell v1.1）。
 * 動機：表格在 <768px 會轉成卡片，卡片有 data-label 當欄位名，欄位多一點也讀得下去；
 * 真正塞不下的是平板的橫向表格。原本只有涵蓋範圍較大的 .iso-hide-tablet
 * （max-width:1199px，連手機一起藏），四個模組因此各自發明了
 * `.xxx-show-mobile { display:flex !important }` 把手機那一段補回來。
 * 這條把區間夾在中間，就不需要再補一次。*/
@media (min-width: 768px) and (max-width: 1199px) {
  .iso-hide-tablet-only { display: none !important; }
}

@media (max-width: 1199px) {
  /* UX §4.2：平板隱藏次要欄位。給表格的 th/td 加 .iso-hide-tablet 即可 */
  .iso-hide-tablet { display: none !important; }
  .iso-sidebar { width: var(--iso-sidebar-w-collapsed); padding-top: var(--iso-space-2); }
  .iso-sidebar__label,
  .iso-sidebar__group,
  .iso-sidebar__foot { display: none; }
  .iso-sidebar__link { justify-content: center; padding: 11px 0; border-left-width: 3px; }
  .iso-form { grid-template-columns: minmax(0, 1fr); }        /* §4.2 表單單欄 */
  .iso-kpis { grid-template-columns: repeat(2, 1fr); }        /* §4.2 KPI 2 列 */
  .iso-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .iso-hide-mobile { display: none !important; }
  .iso-content { padding: var(--iso-page-padding-mobile); }
  .iso-topbar__burger { display: inline-flex; }
  .iso-topbar__module, .iso-topbar__company, .iso-topbar__sep { display: none; }

  /* 側欄變成抽屜 */
  .iso-sidebar {
    position: fixed; inset-block: var(--iso-topbar-h) 0; inset-inline-start: 0;
    z-index: 50;
    width: 260px; max-height: none;
    padding-top: var(--iso-space-3);
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--iso-shadow-lg);
  }
  .iso-sidebar__label, .iso-sidebar__group, .iso-sidebar__foot { display: block; }
  .iso-sidebar__link { justify-content: flex-start; padding: 11px var(--iso-space-4); }
  .iso-app.is-nav-open .iso-sidebar { transform: none; }
  .iso-app.is-nav-open .iso-scrim {
    display: block; position: fixed; inset-block: var(--iso-topbar-h) 0; inset-inline: 0;
    z-index: 45; background: rgba(17, 12, 16, .35);
  }

  .iso-kpis, .iso-grid-2, .iso-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .iso-page__actions { width: 100%; margin-inline-start: 0; }
  .iso-page__actions .iso-btn { flex: 1 1 auto; }

  /* 表格轉卡片（UX §4.1）。模組作者必須替每個 <td> 加 data-label */
  .iso-tablewrap { border-radius: var(--iso-radius-lg); }
  .iso-table thead { display: none; }
  .iso-table, .iso-table tbody, .iso-table tr, .iso-table td { display: block; width: 100%; }
  .iso-table tr {
    /* 🔴 不可以是 width:100%（shell v1.1，四個模組各自回報）：tr 已經 display:block，
       100% 寬再加左右各 12px 外距必然超出 .iso-tablewrap，卡片右緣被 overflow-x 切掉
       （實測 scrollWidth − clientWidth = 12px）。auto 讓它自動扣掉外距。*/
    width: auto;
    margin: var(--iso-space-3);
    border: 1px solid var(--iso-border);
    border-radius: var(--iso-radius-lg);
    background: var(--iso-surface);
    overflow: hidden;
  }
  .iso-table td {
    display: flex; align-items: center; justify-content: space-between; gap: var(--iso-space-3);
    padding: 8px var(--iso-space-3);
    border-bottom: 1px solid var(--iso-gray-100);
    text-align: end;
  }
  .iso-table td:last-child { border-bottom: 0; }
  .iso-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--iso-fs-caption); color: var(--iso-text-muted);
    text-align: start;
  }
  .iso-table td:empty { display: none; }
  .iso-table .iso-num { text-align: end; }

  /* 觸控目標 ≥44px（UX §4.2）。
     只給 min-height 不夠：純圖示鈕（.iso-btn--icon 32px、.iso-topbar__btn 34px、
     漢堡 34px）寬度會停在 32–38px，實測 390×844 有 30 個元素不到 44。
     寬高都要壓，漢堡也要一起列進來（它不是 .iso-topbar__btn）。 */
  .iso-btn, .iso-topbar__btn, .iso-topbar__burger, .iso-sidebar__link { min-height: 44px; }
  .iso-btn--icon, .iso-topbar__btn, .iso-topbar__burger { min-width: 44px; }
  .iso-topbar__burger { height: 44px; }
  .iso-tab { min-height: 44px; }
  .iso-alert__close { min-width: 44px; min-height: 44px; }
  .iso-dialog { width: 100%; max-width: 100%; }
}

@media print {
  .iso-topbar, .iso-sidebar, .iso-toasts, .iso-page__actions { display: none !important; }
  .iso-content { padding: 0; }
}