/* ==========================================================================
   Purchase Order Center — UI Prototype + Flow Prototype (ClinicOS Inventory
   V3, "採購單" leaf of the future 採購中心 hierarchy)
   ==========================================================================
   Pure UI/Flow layer — no backend, no API, static in-memory Prototype data
   only. Reuses shared Foundation classes from inventory-design.css /
   item-center.css untouched (.card, .inventory-section-card,
   .inventory-btn-*, .icon-btn, .dialog-*, .drawer-*, .status-badge,
   .field-grid, .item-more-menu, .item-thumb-placeholder,
   .inventory-empty-state, .query-field, .supplier-search-card,
   .profile-summary-row, .item-movement-timeline family) — deliberately
   does NOT reuse any class owned by purchase-request.css (a sibling
   Prototype page that may be frozen/revised independently); every
   Purchase-Order-specific class below is self-contained in this file even
   where the visual result mirrors something already built for the Purchase
   Request Center flow (e.g. its own po-flow-steps / po-count-tag instead
   of reaching into purchase-request.css's pr-flow-steps / po-supplier-count).
   ========================================================================== *//* ---- Summary Cards (5 tiles, section 七) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ids-space-4);
  margin-bottom: var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-card {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  background: var(--color-white);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-lg);
  padding: var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ids-radius-md);
  background: #eef6fb;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-icon .inv-icon {
  width: 20px;
  height: 20px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-value {
  font-size: var(--ids-font-xl);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-label {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}/* ---- Permission simulator (section 二十一) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-permission-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ids-space-4);
  background: var(--ids-surface-muted);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  padding: var(--ids-space-3) var(--ids-space-4);
  margin-bottom: var(--ids-space-4);
  font-size: var(--ids-font-sm);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-permission-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-permission-title .inv-icon {
  width: 16px;
  height: 16px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-permission-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}/* ---- Filter row (section 八) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-filter-card {
  margin-bottom: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-filter-row {
  display: flex;
  align-items: flex-end;
  gap: var(--ids-space-3);
  flex-wrap: wrap;
}/* ---- Quick filter chips ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ids-space-2);
  margin-bottom: var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-quick-chip {
  height: 32px;
  padding: 0 var(--ids-space-3);
  border: 1px solid var(--ids-border-soft);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text);
  font-size: var(--ids-font-sm);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-quick-chip:hover {
  background: var(--ids-surface-hover);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-quick-chip.active {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}/* ---- List rows (section 九: five-zone layout, no vertical gridlines) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-list-card {
  padding: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-row-list {
  display: flex;
  flex-direction: column;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ids-space-4);
  padding: var(--ids-space-4);
  border-bottom: 1px solid var(--ids-border-soft);
  transition: background 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-row:last-child {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-row:hover {
  background: var(--ids-surface-hover);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-zone-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-zone-a {
  flex: 1 1 240px;
  min-width: 220px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-zone-b, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-zone-c, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-zone-d {
  flex: 1 1 180px;
  min-width: 170px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-zone-e {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-row-line1 {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  flex-wrap: wrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-row-no {
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-row-line2 {
  font-size: var(--ids-font-sm);
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-overdue-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  color: #8a5a00;
  background: #fff6e5;
  border-radius: 999px;
  padding: 2px 8px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-overdue-tag .inv-icon {
  width: 12px;
  height: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-mini-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ids-space-2);
  font-size: var(--ids-font-xs);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-mini-stat span {
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-mini-stat strong {
  color: var(--color-text);
  font-weight: 600;
}/* ---- Progress bar (到貨進度) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--ids-surface-muted);
  overflow: hidden;
  margin-top: 4px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-track-lg {
  height: 10px;
  margin-top: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-teal);
  transition: width 200ms ease;
}/* section 四: soft (not highly-saturated) status tiers shared by the list's
   pct/bar and the Drawer's 到貨進度總覽 bar — reuses the same muted tones
   already established elsewhere in this module (danger/warning/success). */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-fill.tier-danger {
  background: #c96257;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-fill.tier-warning {
  background: #d9a441;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-fill.tier-success {
  background: #4fa895;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-pct {
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-pct.tier-danger {
  color: #b3382c;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-pct.tier-warning {
  color: #8a5a00;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-pct.tier-success {
  color: #0e6d61;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-detail {
  font-size: 11px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-progress-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ids-space-4);
  margin-top: var(--ids-space-3);
  font-size: var(--ids-font-sm);
  color: var(--color-text);
}/* ---- Small count tag (self-contained; not shared with purchase-request.css) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-count-tag {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}/* ---- Purchase Order Drawer (section 十一～二十) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-panel {
  width: 60vw;
  min-width: 900px;
  max-width: 1100px;
}

@media (max-width: 980px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-header {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-3);
  padding: var(--ids-space-5) var(--ids-space-6);
}/* section 六: two visually distinct tiers — identity/actions on top,
   metadata below, never squeezed onto one line. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-header-top {
  display: flex;
  align-items: flex-start;
  gap: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ids-space-2) var(--ids-space-5);
  padding-top: var(--ids-space-2);
  border-top: 1px solid var(--ids-border-soft);
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-header-meta .inv-icon {
  width: 13px;
  height: 13px;
  vertical-align: text-bottom;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--ids-radius-md);
  background: #eef6fb;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-title {
  font-size: var(--ids-font-lg);
  font-weight: 700;
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-supplier {
  font-size: var(--ids-font-sm);
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-header-actions {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  flex-shrink: 0;
}/* ---- Supplier shortage alert (section 八) — soft warning tone; the
   neutral "not yet confirmed" variant reuses the same layout with a muted
   info tone instead, and is never treated as an error. ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-shortage-alert {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  flex-wrap: wrap;
  padding: var(--ids-space-2) var(--ids-space-3);
  border-radius: var(--ids-radius-sm);
  background: #fff6e5;
  color: #8a5a00;
  font-size: var(--ids-font-sm);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-shortage-alert .inv-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-shortage-alert-neutral {
  background: var(--ids-surface-muted);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-shortage-link {
  margin-left: auto;
  border: none;
  background: none;
  padding: 0;
  font-size: var(--ids-font-sm);
  font-weight: 600;
  color: var(--color-teal);
  cursor: pointer;
  text-decoration: underline;
}/* ---- Drawer quick summary row (section 七 — between Tabs and Body) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ids-space-6);
  padding: var(--ids-space-3) var(--ids-space-6);
  border-bottom: 1px solid var(--ids-border-soft);
  background: var(--ids-surface-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-block-label {
  font-size: 11px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-block-value {
  font-size: var(--ids-font-lg);
  font-weight: 700;
  color: var(--color-navy);
}/* ---- 採購品項 rows (採購內容 tab) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-item-row-list, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-confirm-row-list {
  display: flex;
  flex-direction: column;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-item-row, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-confirm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ids-space-3);
  padding: var(--ids-space-3) 0;
  border-bottom: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-item-row:last-child, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-confirm-row:last-child {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--ids-radius-md);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-item-info {
  flex: 1 1 160px;
  min-width: 140px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-item-stat {
  font-size: var(--ids-font-sm);
  color: var(--color-text);
  min-width: 84px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-item-stat-label {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-edit-qty-input {
  width: 72px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-sm);
  font-size: var(--ids-font-sm);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-confirm-note {
  flex-basis: 100%;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}/* ---- Supplier confirmation diff (section 五) — direction spelled out in
   the badge text (少/無差異/多), never a bare +/- sign. ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-confirm-flow {
  font-size: var(--ids-font-sm);
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-diff-badge {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
  background: var(--ids-surface-muted);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-diff-badge.tier-short {
  background: #fbe8e6;
  color: #b3382c;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-diff-badge.tier-none {
  background: #e3f5f1;
  color: #0e6d61;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-diff-badge.tier-over {
  background: #e6f0fa;
  color: #1c5d8c;
}/* ---- 到貨進度 batch cards — Accordion (section 九) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-card {
  margin-bottom: var(--ids-space-3);
  padding: 0;
  overflow: hidden;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ids-space-3);
  width: 100%;
  padding: var(--ids-space-4);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-header:hover {
  background: var(--ids-surface-hover);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-header .inv-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-header-title {
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ids-space-4);
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  flex: 1;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-body {
  padding: 0 var(--ids-space-4) var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ids-space-3);
  padding: var(--ids-space-2) 0;
  border-top: 1px dashed var(--ids-border-soft);
  font-size: var(--ids-font-sm);
}/* ---- 到貨驗收 Dialog (section 十七) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-receive-dialog {
  width: 720px;
  max-width: 92vw;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-receive-body {
  padding: var(--ids-space-5) var(--ids-space-6);
  max-height: 65vh;
  overflow-y: auto;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-receive-row-list {
  display: flex;
  flex-direction: column;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-receive-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ids-space-3);
  padding: var(--ids-space-3) 0;
  border-bottom: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-receive-row:last-child {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-receive-qty-input {
  width: 80px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-sm);
  font-size: var(--ids-font-sm);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-receive-qty-input:disabled {
  background: var(--ids-surface-muted);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-receive-batch-card {
  margin-bottom: var(--ids-space-3);
}/* ---- Self-contained step navigator (mirrors, but does not reuse,
   purchase-request.css's pr-flow-steps) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-flow-steps {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  margin-bottom: var(--ids-space-4);
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-flow-step.active {
  color: var(--color-teal);
  font-weight: 600;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-flow-step.done {
  color: #0e6d61;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-flow-step-sep {
  color: var(--ids-border-soft);
}/* ---- Responsive (section 二十三) ---- */


@media (max-width: 1440px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1200px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-row {
    flex-direction: column;
  }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-zone-e {
    margin-left: 0;
    justify-content: flex-end;
    width: 100%;
  }
}/* ==========================================================================
   採購單 Phase 1B Step 1 — 採購單主畫面（Header／Summary Strip／Filter／
   Table／Batch Toolbar）。延續待採購單 Phase 1A-R1 的 ERP 工作清單風格，但
   完全自成一格：不重用 purchase-request.css 的任何 pr-* class，維持本檔案
   開頭已聲明的模組獨立慣例。上方既有的 .po-summary-grid／.po-row／
   .po-zone-*（V1 五區卡片列）保留未刪除，僅不再由 PurchaseOrdersPage.js
   渲染。本步驟不含 Drawer／Dialog，相關樣式留待後續步驟各自新增。
   ========================================================================== */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-page-shell { gap: 0; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-badge-info { background: #e6f0fb; color: #1d5fa8; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-badge-cyan { background: #e3f6f7; color: #0f7a86; }/* ---- Summary Strip ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-summary-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-lg);
  background: var(--color-white);
  cursor: pointer;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-strip-item:disabled { cursor: default; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-strip-item:hover:not(:disabled) { border-color: var(--color-teal); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-strip-item.active { border-color: var(--color-teal); background: #eef8f7; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-strip-item .inv-icon { width: 16px; height: 16px; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-strip-value { font-size: var(--ids-font-lg); font-weight: 700; color: var(--color-navy); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-strip-label { font-size: var(--ids-font-xs); white-space: nowrap; }/* ---- Filter bar ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-filter-card { margin-bottom: var(--ids-space-4); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-filter-row { display: flex; align-items: flex-end; gap: var(--ids-space-3); flex-wrap: wrap; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-quick-row { margin-top: var(--ids-space-3); align-items: center; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-quick-chip {
  padding: 6px 14px;
  border: 1px solid var(--ids-border-soft);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text-muted);
  font-size: var(--ids-font-xs);
  cursor: pointer;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-quick-chip:hover { border-color: var(--color-teal); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-quick-chip.active { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); font-weight: 600; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-clear-btn {
  margin-left: auto;
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ids-font-xs);
}/* ---- Table ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-list-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-lg);
  background: var(--color-white);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table { display: flex; flex-direction: column; min-width: 1040px; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-row {
  display: grid;
  grid-template-columns: 40px 140px 150px 100px 100px 120px 110px 90px 90px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ids-border-soft);
  font-size: var(--ids-font-xs);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-row:last-child { border-bottom: none; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-row.is-selected { background: #eef8f7; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-header-row {
  position: sticky;
  top: 0;
  z-index: 3;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--ids-surface-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-cell { overflow: hidden; text-overflow: ellipsis; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-col-check {
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 2;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-col-actions {
  position: sticky;
  right: 0;
  z-index: 2;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-header-row .po-col-check, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-header-row .po-col-actions { background: var(--ids-surface-muted); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-amount-cell { font-weight: 600; color: var(--color-navy); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-row-action { height: 26px; padding: 0 8px; font-size: 11px; }/* Step 2：資料列可點擊開啟 Decision Drawer；勾選／操作欄維持一般游標。 */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-row:not(.po-table-header-row) { cursor: pointer; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-row:not(.po-table-header-row) .po-col-check, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-table-row:not(.po-table-header-row) .po-col-actions { cursor: default; }/* ---- 批次操作列 ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ids-space-3);
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: var(--ids-space-3);
  background: #eef8f7;
  border: 1px solid var(--color-teal);
  border-radius: var(--ids-radius-lg);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-left { display: flex; align-items: center; gap: var(--ids-space-3); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-bar .po-batch-count { font-weight: 700; color: var(--color-navy); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-batch-actions { display: flex; align-items: center; gap: var(--ids-space-2); flex-wrap: wrap; }/* ==========================================================================
   採購單 Phase 1B Step 2 — ERP Decision Drawer。右側滑入，Tabs／Body／
   Footer 沿用共用的 .drawer-tabs／.drawer-tab／.drawer-body／
   .drawer-footer／.drawer-close（不重複定義其基礎行為，只加必要覆寫）；
   其餘 Decision Drawer 專屬樣式一律使用 po-drawer- 前綴，且刻意避開本檔案
   前段（V1 舊設計，已不由任何頁面渲染）已使用過的
   .po-drawer-panel／-header／-title／-supplier／-header-actions／-summary
   同名 class，避免與舊規則的 width/min-width 疊加衝突。
   ========================================================================== */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 43, 68, 0.32);
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-panel {
  width: min(720px, 52vw);
  max-width: 92vw;
  height: 100%;
  background: var(--color-white);
  box-shadow: -8px 0 24px rgba(18, 43, 68, 0.16);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 1366px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-panel { width: 680px; }
}

@media (max-width: 1280px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-panel { width: 640px; }
}

@media (max-width: 1100px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-panel { width: calc(100% - 32px); max-width: 100%; }
}

@media (max-width: 640px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-panel { width: 100%; max-width: 100%; }
}/* ---- Header：三層資訊，狀態沿用列表既有 status-badge 規則 ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--ids-space-4) var(--ids-space-5);
  border-bottom: 1px solid var(--ids-border-soft);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-header-top > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-title {
  font-size: var(--ids-font-lg);
  font-weight: 700;
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-header-supplier {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-supplier-name {
  font-size: var(--ids-font-sm);
  font-weight: 600;
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-supplier-code {
  font-size: 11px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ids-space-2) var(--ids-space-4);
  font-size: 11px;
  color: var(--color-text-muted);
}/* ---- Decision Summary：第一屏免捲動即可判斷，金額最醒目 ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ids-space-3);
  padding: var(--ids-space-3) var(--ids-space-5);
  background: var(--ids-surface-muted);
  border-bottom: 1px solid var(--ids-border-soft);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-card-label {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-card-value {
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-card-amount .po-drawer-decision-card-value {
  font-size: var(--ids-font-lg);
  color: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-card-received .po-drawer-decision-card-value { color: #0e6d61; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-card-remaining .po-drawer-decision-card-value { color: #b3502c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-progress {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  padding: 0 var(--ids-space-5) var(--ids-space-3);
  background: var(--ids-surface-muted);
  border-bottom: 1px solid var(--ids-border-soft);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--ids-border-soft);
  overflow: hidden;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-progress-bar {
  height: 100%;
  background: var(--color-teal);
  border-radius: 999px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-progress-label {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}/* ---- Body／Footer：沿用共用 .drawer-body／.drawer-footer 行為，只調整
   Footer 左右分佈（左：關閉／右：狀態按鈕群） ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-body { min-height: 0; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-decision-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
}/* ---- 基本資料 Tab ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-info-section-title {
  font-size: var(--ids-font-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: var(--ids-space-4) 0 var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-info-section-title:first-child { margin-top: 0; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-info-field { display: flex; flex-direction: column; gap: 2px; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-info-field-block { margin-top: var(--ids-space-3); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-info-label { font-size: 11px; color: var(--color-text-muted); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-info-value { font-size: var(--ids-font-sm); color: var(--color-text); }/* ---- 採購明細 Tab：只在 Drawer 內水平捲動，不影響主頁 ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-table { display: flex; flex-direction: column; min-width: 560px; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-row {
  display: grid;
  grid-template-columns: 2fr 90px 80px 80px 100px 110px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ids-border-soft);
  font-size: var(--ids-font-xs);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-row:last-child { border-bottom: none; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-header-row {
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--ids-surface-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-total-row {
  font-weight: 700;
  background: var(--ids-surface-muted);
  border-top: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-cell-name { min-width: 0; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-name { font-weight: 600; color: var(--color-text); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-meta { font-size: 11px; color: var(--color-text-muted); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-amount { text-align: right; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-cell-strong { font-weight: 700; color: var(--color-navy); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-received { color: #0e6d61; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-item-remaining { color: #b3502c; }/* ---- 收貨紀錄 Tab ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-receipt-table { display: flex; flex-direction: column; border: 1px solid var(--ids-border-soft); border-radius: var(--ids-radius-md); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-receipt-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ids-border-soft);
  font-size: var(--ids-font-xs);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-receipt-row:last-child { border-bottom: none; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-receipt-header-row { font-weight: 600; color: var(--color-text-muted); background: var(--ids-surface-muted); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-tab-footer-action { margin-top: var(--ids-space-3); }/* ---- 附件 Tab ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-attachment-list { display: flex; flex-direction: column; gap: var(--ids-space-2); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-attachment-row {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  padding: var(--ids-space-2) var(--ids-space-3);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-attachment-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--ids-radius-sm);
  background: #eef6fb;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-attachment-info { flex: 1; min-width: 0; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-attachment-name { font-weight: 600; color: var(--color-text); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-attachment-meta { font-size: 11px; color: var(--color-text-muted); }/* ---- 操作紀錄 Tab ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-activity-list { display: flex; flex-direction: column; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-activity-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--ids-space-3);
  padding: var(--ids-space-2) 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-activity-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--color-teal);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-activity-action { font-size: var(--ids-font-sm); color: var(--color-text); font-weight: 600; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-drawer-activity-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }/* ==========================================================================
   採購單 Phase 1B Step 3A — 新增採購單 Dialog Shell。獨立於既有
   .dialog-overlay／.dialog-panel（不覆寫、不重用其 class 名稱，避免與其他
   仍在使用該共用元件的頁面產生尺寸疊加疑慮），採與 ERP Decision Drawer
   一致的中央 Dialog 版型；Body 內表單沿用共用的 .field-grid／.field-group
   （未覆寫其定義）。本階段只有 Shell，不含品項 Grid。
   ========================================================================== */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 43, 68, 0.35);
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-panel {
  width: min(920px, calc(100vw - 64px));
  max-height: calc(100vh - 48px);
  background: var(--color-white);
  border-radius: var(--ids-radius-lg);
  box-shadow: 0 12px 32px rgba(18, 43, 68, 0.2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 1100px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-panel { width: calc(100vw - 32px); }
}

@media (max-width: 640px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-panel { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-panel .field-grid { grid-template-columns: 1fr; }
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ids-space-3);
  padding: var(--ids-space-4) var(--ids-space-5);
  border-bottom: 1px solid var(--ids-border-soft);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-title {
  font-size: var(--ids-font-lg);
  font-weight: 700;
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff6e5;
  color: #8a5a00;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-subtitle {
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ids-space-5);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-section-title {
  font-size: var(--ids-font-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: var(--ids-space-5) 0 var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-section-title:first-child { margin-top: 0; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-supplier-selector {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-white);
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: left;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-supplier-selector:hover { border-color: var(--color-teal); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-supplier-selector span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-note {
  width: 100%;
  min-height: 84px;
  padding: 9px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-note-count {
  margin-top: 4px;
  text-align: right;
  font-size: 11px;
  color: var(--color-text-muted);
}/* .po-create-shell-items-placeholder（Step 3A 版型佔位樣式）於 Step 3B 由
   採購品項 Grid／Empty State 取代，故移除；Empty State 改沿用共用的
   .inventory-empty-state（EmptyState.js），不再需要本檔案自訂佔位框。 */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ids-space-4) var(--ids-space-5);
  border-top: 1px solid var(--ids-border-soft);
  box-shadow: 0 -4px 12px rgba(18, 43, 68, 0.04);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
}/* ==========================================================================
   採購單 Phase 1B Step 3B — 採購品項 Grid UI Prototype（新增採購單 Dialog
   Shell 內）。純版型展示，不覆寫 .po-create-shell-panel／-header／-body／
   -footer、不覆寫 .po-drawer-item-（Decision Drawer 已 Freeze）、不覆寫
   .drawer-*／.dialog-*／.inventory-btn-*。獨立使用 po-create-shell-item-
   前綴。
   ========================================================================== */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-section { margin-top: var(--ids-space-5); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ids-space-3);
  margin-bottom: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-section-title {
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-section-subtitle {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}/* ---- Grid：CSS Grid（非 table），Header 與 Rows 共用同一組欄寬，桌面完整
   顯示，1024 於 .po-create-shell-item-grid-scroll 容器內水平捲動. ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-grid-scroll {
  overflow-x: auto;
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-grid { display: flex; flex-direction: column; min-width: 900px; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) 80px 110px 120px 130px 56px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ids-border-soft);
  font-size: var(--ids-font-xs);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-row:last-child { border-bottom: none; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-grid-header {
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--ids-surface-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-grid-header .po-create-shell-item-cell:nth-child(5), :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-grid-header .po-create-shell-item-cell:nth-child(6) { text-align: right; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-grid-header .po-create-shell-item-cell:last-child { text-align: center; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-cell { min-width: 0; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-main { display: flex; flex-direction: column; gap: 2px; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-name { font-weight: 600; color: var(--color-text); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-code { font-size: 11px; color: var(--color-text-muted); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
  text-align: right;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-money { text-align: right; font-weight: 700; color: var(--color-navy); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-shell-item-delete { display: flex; justify-content: center; }/* ==========================================================================
   採購單 Phase 1B Step 3C-D1 — Order Summary UI Shell（新增採購單 Dialog
   Shell 內，Grid／Empty State 之後、Footer 之前）。純靜態 UI Preview，固定
   Preview 值只用於確認版面，不依賴 JavaScript 動態調整樣式。獨立使用
   po-create-order-summary- 前綴，不覆寫 .po-create-shell-item-*／
   .po-create-shell-footer。
   ========================================================================== */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary {
  margin-top: var(--ids-space-5);
  padding: var(--ids-space-4);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  background: var(--ids-surface-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-header {
  font-size: var(--ids-font-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ids-space-6);
  padding-bottom: var(--ids-space-3);
  margin-bottom: var(--ids-space-3);
  border-bottom: 1px dashed var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-stat-label {
  font-size: 11px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-stat-value {
  font-size: var(--ids-font-sm);
  font-weight: 600;
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-amounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-label {
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-value {
  font-size: var(--ids-font-sm);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-total {
  padding-top: var(--ids-space-2);
  margin-top: 2px;
  border-top: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-total .po-create-order-summary-label {
  font-weight: 700;
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-total .po-create-order-summary-value {
  font-size: calc(var(--ids-font-sm) + 3px);
  font-weight: 700;
  color: var(--color-navy);
}

@media (max-width: 640px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-create-order-summary-stats { flex-direction: column; gap: var(--ids-space-2); }
}