/* Inventory 單據頁共用「單欄 Card List ＋ Accordion」版型
   INVENTORY-UI-CONSOLIDATION-V2 §1 / §9

   採購需求／採購退貨／領料／調撥‧借出 四頁原本都是「左列表＋右側明細」。
   在 1024–1280 寬度下右側面板固定吃掉 480–520px，左側卡片被壓成窄條，
   而面板本身又留下大片空白 —— 這正是本票要取消的版型。

   這裡不重寫那四頁的內容，只換掉外層骨架：列表變成單欄，被選取的那張卡片
   就地展開成 Accordion，明細直接長在卡片內。四頁沿用同一組 .inv-doc-* 類別，
   所以版型只有一份、不會再各自漂移。

   Foundation classes（.card / .status-badge / .inventory-btn-* / .field-grid /
   .inventory-section-card）一律沿用既有 Inventory Design System，此檔不新增
   任何色彩系統，顏色全部取自既有 CSS 變數。 */

/* ---------- 單欄清單 ---------- */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-2);
  min-width: 0;
}

/* ---------- 卡片本體 ---------- */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-card {
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-lg);
  background: var(--color-white);
  overflow: hidden;
  min-width: 0;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-card:hover {
  border-color: var(--color-border);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-card.is-open {
  border-color: var(--color-primary, var(--color-border));
  box-shadow: 0 2px 10px rgba(18, 43, 68, 0.08);
}

/* ---------- 收合狀態：單號／狀態／日期／對象／金額或總量／主要操作 ---------- */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-summary {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(84px, auto) minmax(96px, 0.7fr) minmax(120px, 1.2fr) minmax(96px, 0.8fr) auto;
  align-items: center;
  gap: var(--ids-space-3);
  padding: 10px var(--ids-space-4);
  cursor: pointer;
  min-width: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-summary > * {
  min-width: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-no {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--ids-font-sm);
  color: var(--color-text);
}
/* Disclosure caret — rotates in place so the row height never changes. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-caret {
  flex: 0 0 auto;
  width: 14px;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-card.is-open .inv-doc-caret {
  transform: rotate(90deg);
}
/* One label+value cell. Label above value, matching the panel convention. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-cell-label {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-cell-value {
  font-size: var(--ids-font-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-cell-value.is-strong {
  font-weight: 600;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-summary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  flex-shrink: 0;
}
/* The summary row is clickable as a whole, so a button inside it must not
   also toggle the accordion — pages stopPropagation, this keeps the hit area
   honest. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-summary-actions button {
  white-space: nowrap;
}
/* Size modifier only — inherits every colour and border from the existing
   .inventory-btn-* variants so the summary row's primary action reads as the
   same button, just scaled for a list row. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-sm {
  padding: 4px 10px;
  font-size: var(--ids-font-xs);
  line-height: 1.6;
  min-height: 26px;
}

/* ---------- 展開內容 ---------- */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body {
  display: none;
  border-top: 1px solid var(--ids-border-soft);
  padding: var(--ids-space-4);
  background: var(--ids-surface-muted, #fafbfc);
  min-width: 0;
  overflow-x: hidden;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-card.is-open .inv-doc-body {
  display: block;
}

/* The four pages' detail markup keeps its existing .prt-* structure; these
   rules re-home it from "fixed 480px side panel" to "full-width accordion".
   §9 「Accordion 展開後不可遮擋按鈕」: nothing inside is positioned or
   sticky, so the row below is simply pushed down, never covered. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-panel-inner {
  display: block;
  height: auto;
  min-height: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-ws-body {
  display: block;
  overflow: visible;
  padding: 0;
  flex: none;
}
/* The panel header duplicated 單號/狀態 that the summary row already shows —
   only its action buttons survive, laid out as a plain toolbar. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-ws-header {
  padding: 0 0 var(--ids-space-3) 0;
  border-bottom: 1px solid var(--ids-border-soft);
  margin-bottom: var(--ids-space-3);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-ws-header-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ids-space-2);
  align-items: center;
  justify-content: flex-end;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-ws-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* 單號 and 狀態 are already the first two cells of the summary row directly
   above — repeating them inside the body is exactly the duplication §1 asks
   to remove. The workspace modules keep emitting them; they are hidden here
   rather than deleted, so the same modules still render correctly anywhere
   else they are used. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-ws-header-identity,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-ws-header > .prt-ws-title {
  display: none;
}
/* The workspace's own close button collapses the accordion (pages wire
   onClose to that), so it stays — just sized to sit with the action row. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .drawer-close {
  flex: 0 0 auto;
}

/* Wider than the old 480px panel, so 基本資料 gets a genuine multi-column
   grid instead of the cramped stack the manual UAT reported. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .field-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
  align-items: start;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .field-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .field-group.full-width {
  grid-column: 1 / -1;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .field-group label {
  display: block;
  margin-bottom: 4px;
  line-height: 1.4;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .field-group input,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .field-group select {
  height: 32px;
  width: 100%;
  box-sizing: border-box;
}
/* §9 無水平捲軸: anything genuinely wider than the card scrolls inside its
   own region rather than widening the page. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body table {
  max-width: 100%;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-source-readonly-table,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-source-table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .prt-item-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ids-space-2);
}

/* ---------- 響應式 ---------- */
/* §9 手機版自動改單欄 — the summary collapses to a stacked block so no cell
   is squeezed below readability. */
@media (max-width: 900px) {
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 8px;
  }
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-summary-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-body .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 整列 Card（§2 採購單 / §6 品項 / §7 分類 / §8 供應商） ----------
   Same visual language as the accordion summary above — one full-width row,
   label above value, actions pinned right — but with no expandable body.
   Replaces the ERP-style fixed-column tables those four lists used, which at
   1024–1280 either overflowed sideways or left most cells nearly empty. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-2);
  min-width: 0;
}
/* Flexbox, not grid: `repeat(auto-fit, …)` cannot be combined with intrinsic
   `auto` tracks — the whole grid-template-columns declaration is invalid and
   dropped, which collapsed every row into a single stacked column ~390px
   tall. Measured, then fixed. Flex also lets each list use a different number
   of cells without a bespoke track list per page. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ids-space-3);
  padding: 10px var(--ids-space-4);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-lg);
  background: var(--color-white);
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-card:hover {
  border-color: var(--color-border);
  box-shadow: 0 1px 6px rgba(18, 43, 68, 0.06);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-card.is-selected {
  border-color: var(--color-primary, var(--color-border));
  background: var(--ids-surface-muted, #fafbfc);
}
/* Each labelled cell shares the leftover width; the thumbnail, the checkbox
   and the action group keep their natural size. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-card > .inv-doc-cell {
  flex: 1 1 110px;
  min-width: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-check {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  flex-shrink: 0;
}
/* A thumbnail cell (§6 品項圖片) sits at its natural size, never stretched. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--ids-radius-sm, 4px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ids-surface-muted, #f2f4f6);
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1100px) {
  /* Cells need more room before they become unreadable, so the action group
     drops to its own line rather than everything being squeezed. */
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-card > .inv-doc-cell {
    flex: 1 1 140px;
  }
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  /* §9 手機版自動改單欄 — every cell takes the full width. */
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-row-card > .inv-doc-cell {
    flex: 1 1 100%;
  }
}

/* ---------- 取代舊的 左列表＋右面板 骨架 ---------- */
/* The pages keep emitting .prt-workspace as their list wrapper; inside the
   consolidated shell it is simply a full-width single column. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-shell .prt-workspace {
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-shell .prt-list-panel {
  flex: 1 1 100%;
  max-width: 100%;
  width: 100%;
  overflow: visible;
  height: auto;
}
/* §2 KPI 縮小高度 — same tiles, less vertical cost, so the list starts higher
   up the page. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-shell .prt-kpi-card,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .prt-kpi-card {
  padding: 8px var(--ids-space-3);
  gap: var(--ids-space-2);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-shell .prt-kpi-value,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .prt-kpi-value {
  font-size: 18px;
  line-height: 1.2;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-shell .prt-kpi-sub,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .prt-kpi-sub {
  display: none;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-doc-shell .prt-kpi-icon,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .prt-kpi-icon {
  width: 30px;
  height: 30px;
}

/* §8 供應商 KPI 縮小約 25–30%，並讓搜尋／狀態／進階／清除維持同一列 ------- */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .supplier-summary-card,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .item-summary-card {
  padding: 9px var(--ids-space-3);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .supplier-summary-value,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .item-summary-value {
  font-size: 19px;
  line-height: 1.15;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .supplier-summary-icon,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-compact-kpi .item-summary-icon {
  width: 30px;
  height: 30px;
}
/* One row for 搜尋 / 狀態 / 進階篩選 / 清除篩選 — they wrap only when the
   viewport genuinely cannot hold them, rather than stacking by default. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-filter-single-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ids-space-2) var(--ids-space-3);
  min-width: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-filter-single-row > .supplier-search-input-wrap,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-filter-single-row > .item-search-input-wrap {
  flex: 1 1 240px;
  min-width: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-filter-single-row > .query-field {
  flex: 0 1 auto;
  min-width: 0;
}