:root {
  --color-navy: #123b5e;
  --color-navy-dark: #0c2a44;
  --color-teal: #12897a;
  --color-white: #ffffff;
  --color-bg: #f2f4f6;
  --color-border: #dde3e8;
  --color-text: #1f2b33;
  --color-text-muted: #5b6b76;
  --color-danger: #b3382c;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) * {
  box-sizing: border-box;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) body {
  margin: 0;
  font-family: "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) #app-shell {
  display: flex;
  min-height: 100vh;
}/* Sidebar — pinned to the viewport height so its own nav list can scroll
   independently of .content-area (Inventory IA V1, section 二: "左側選單可
   獨立垂直捲動，主內容區不可跟著左側選單捲動"). Only .sidebar-nav scrolls;
   .sidebar itself clips overflow so the title block above it stays fixed. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .sidebar-title {
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .sidebar-title-main {
  font-size: 15px;
  font-weight: bold;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .sidebar-title-sub {
  font-size: 13px;
  margin-top: 4px;
  color: #cfe0ec;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  flex: 1;
  overflow-y: auto;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .nav-item {
  background: transparent;
  border: none;
  color: var(--color-white);
  text-align: left;
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .nav-item:hover {
  background: var(--color-navy-dark);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .nav-item.active {
  background: var(--color-teal);
  font-weight: bold;
}/* Content area */:is(#inventoryHostRoot, #inventoryOverlayRoot) .content-area {
  flex: 1;
  padding: 24px;
  overflow-x: auto;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .page-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .stat-tile {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-teal);
  border-radius: 6px;
  padding: 16px;
  min-width: 160px;
  flex: 1;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .stat-tile-label {
  font-size: 13px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .stat-tile-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-navy);
  margin-top: 6px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .notice-banner {
  background: #fff6e5;
  border: 1px solid #eccb7a;
  color: #8a5a00;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) table.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) table.data-table th, :is(#inventoryHostRoot, #inventoryOverlayRoot) table.data-table td {
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) table.data-table th {
  background: #eef2f5;
  color: var(--color-navy);
}/* Table shell — optional wrapper for overflow-x handling + rounded border */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-table-shell {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow-x: auto;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-table-shell table.data-table {
  border: none;
  margin-bottom: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .form-row input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .form-row select {
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary {
  background: var(--color-teal);
  color: var(--color-white);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn:hover, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary:hover {
  background: #0e6d61;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost {
  background: transparent;
  color: var(--color-navy);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost:hover {
  background: var(--color-bg);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .settings-list {
  list-style: none;
  padding: 0;
  margin: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .settings-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .settings-list li strong {
  color: var(--color-navy);
  display: inline-block;
  min-width: 140px;
}/* Toast */:is(#inventoryHostRoot, #inventoryOverlayRoot) .toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toast {
  min-width: 220px;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 5px;
  color: var(--color-white);
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toast-success {
  background: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toast-error {
  background: var(--color-danger);
}/* Query bar / toolbar */:is(#inventoryHostRoot, #inventoryOverlayRoot) .query-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field label {
  font-size: 12px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field select {
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
  min-width: 140px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn-secondary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary {
  background: var(--color-white);
  color: var(--color-navy);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn-secondary:hover, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary:hover {
  background: var(--color-bg);
}/* Status badge */:is(#inventoryHostRoot, #inventoryOverlayRoot) .status-badge, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-success, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-warning, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-danger {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .status-badge.active, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-success { background: #e3f5f1; color: #0e6d61; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .status-badge.inactive, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-danger { background: #fbe8e6; color: #b3382c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-warning { background: #fff6e5; color: #8a5a00; }/* Row action links */:is(#inventoryHostRoot, #inventoryOverlayRoot) .action-link {
  background: transparent;
  border: none;
  color: var(--color-teal);
  cursor: pointer;
  font-size: 12px;
  margin-right: 10px;
  padding: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .action-link:hover {
  text-decoration: underline;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .action-link.danger {
  color: var(--color-danger);
}/* Icon-style action buttons (檢視/編輯 as 👁️/✏️ etc.) — native title
   attribute provides the hover tooltip, no new JS/CSS tooltip library. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn {
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
  margin-right: 4px;
  border-radius: 4px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn:hover {
  background: var(--color-bg);
  text-decoration: none;
}/* Pagination */:is(#inventoryHostRoot, #inventoryOverlayRoot) .pagination-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .pagination-bar button {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .pagination-bar button.active {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .pagination-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}/* Drawer (right-side slide-in, used for Supplier create/edit/view) */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 43, 68, 0.35);
  display: flex;
  justify-content: flex-end;
  z-index: 900;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-panel, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-drawer-shell {
  width: 760px;
  max-width: 100%;
  height: 100%;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--color-border);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab {
  background: transparent;
  border: none;
  padding: 12px 18px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab.active {
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
  font-weight: bold;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
}/* Drawer form layout */:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-grid, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 16px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group label, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field label, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-field-label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group select, :is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group textarea, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field select, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group textarea, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field textarea {
  resize: vertical;
  min-height: 70px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group.full-width, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field.full-width {
  grid-column: 1 / -1;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .checkbox-group, :is(#inventoryHostRoot, #inventoryOverlayRoot) .radio-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .checkbox-group label, :is(#inventoryHostRoot, #inventoryOverlayRoot) .radio-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 0;
}/* Tag/Chip style multi-select (供應商品類) — up to 3 per row, wraps
   automatically. Still a real checkbox input for accessibility, just
   styled as a bordered pill instead of a bare checkbox+label pair. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 calc(33.333% - 6px);
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: normal;
  color: var(--color-text);
  cursor: pointer;
  margin-bottom: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .chip:has(input:checked) {
  border-color: var(--color-teal);
  background: #e3f5f1;
  color: #0e6d61;
}/* .field-group input sets width:100% for text/select inputs — override it
   for the checkbox so it doesn't stretch to fill the whole chip. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .chip input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  order: -1;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .section-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-navy);
  margin: 4px 0 10px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .readonly-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .tab-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .empty-state, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 24px;
  font-size: 13px;
}/* Simple centered dialog (used for the item picker) */:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 43, 68, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 950;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-panel {
  width: 480px;
  max-width: 92vw;
  max-height: 80vh;
  background: var(--color-white);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-body {
  padding: 14px 18px;
  overflow-y: auto;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-top: 10px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-row {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-row:last-child {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-row:hover {
  background: var(--color-bg);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-row.selected {
  background: #e3f5f1;
}/* ==========================================================================
   Shared "inventory-*" building blocks (Phase 1B-1A). Reused by future
   pages (Item page 2+, Purchase, Receiving, Stock Count, ...). Do NOT rename
   .field-grid / .checkbox-group / .radio-group / .drawer-* / .dialog-* —
   those are already shared with the Supplier Drawer.
   ========================================================================== *//* Page-level scroll containment: sidebar stays put, only the page's own
   content scrolls, and the sticky footer always has its own space (never
   overlaps content) because it is a normal flex sibling, not position:fixed. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-basic-page-root, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell {/* 48px = .content-area's 24px top+bottom padding */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px); 
  min-height: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-basic-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
}/* Header (標題 / 副標題 / 返回列表 / 全螢幕) */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-shrink: 0;
  gap: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header-title, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-navy);
  line-height: 1.3;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header-subtitle, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 3px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-page-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
/* Generic Summary Cards (Issue #008: DashboardPage.js used these classes
   from the start but no CSS for them was ever written, so the tiles
   rendered as bare numbers/labels — same card/icon/grid pattern already
   established per-page as .warehouse-summary-* / .supplier-summary-*, just
   under the shared "inventory-*" prefix so any future page can reuse it
   without redefining its own copy.) */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: var(--ids-space-3);
  margin-bottom: var(--ids-space-4);
}
/* CLINICOS-V4-UAT-FIX-004：這張卡的版面是「icon 在左、數值與標籤在右」的橫向列。
   flex-direction 原本沒有寫出來，靠的是 flex 的預設值 row —— 直到 Presentation V4 遷移
   （commit 0f8b28b1）在標記上多掛了共用的 .cos-kpi，而 .cos-kpi 帶著 flex-direction:column。
   本規則雖然特異性較高，但沒有宣告 flex-direction 就蓋不掉它，於是 icon 被擠到數值上方，
   卡片由橫向列變成直向堆疊，實測高度從緊湊列一路長到 156px。這裡把橫向列這件事明白寫出來，
   讓本模組的版面契約自己完整，不再依賴預設值、也不受任何共用類別的 flex-direction 影響。 */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-card {
  display: flex;
  flex-direction: row;
  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);
  /* 密度沿用 commit 14bb203e「refine dashboard hierarchy and KPI density」核定的緊湊值；
     該值在下一個 commit（b1826038）被整段改寫時一併回退成 var(--ids-space-4)，這裡復原。 */
  padding: var(--ids-space-3) var(--ids-space-4);
  min-width: 0;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-card:hover {
  box-shadow: var(--ids-shadow-sm);
  transform: translateY(-1px);
}
/* 尺寸同樣復原為 14bb203e 核定值（44/22），b1826038 曾一併放大為 48/24。 */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-icon {
  width: 44px;
  height: 44px;
  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) .inventory-summary-icon .inv-icon {
  width: 22px;
  height: 22px;
}
/* INVENTORY-DASHBOARD-VISUAL-ACCENT-001: low-saturation per-category icon
   tones, reusing the exact bg/color pairs already established elsewhere in
   this module (receipt-center.css .rc-kpi-card-*, material-issue-center.css
   .mi-badge-purple) rather than inventing new hex values. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-icon-blue {
  background: #e6f0fa;
  color: #1c5d8c;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-icon-green {
  background: #e3f5f1;
  color: #0e6d61;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-icon-orange {
  background: #fff6e5;
  color: #8a5a00;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-icon-purple {
  background: #f1eafb;
  color: #6b3fa0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-value {
  /* 14bb203e 核定的 KPI 字級；b1826038 放大為 36px，是本次「數字過大」的直接來源。 */
  font-size: 26px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-label {
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}
/* INVENTORY-DASHBOARD-LAYOUT-002: KPI grid below + two-column Dashboard
   lower section (Quick Actions / Inventory Health), scoped to Dashboard only
   via the #inventory-dashboard-* host ids so no other Inventory page's
   .inventory-section-card is affected. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-dashboard-lower {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--ids-space-4);
  align-items: stretch;
}
/* CLINICOS-V4-UAT-FIX-004：這兩條原本寫成單一 class，特異性與 inventory-design.css 的
   泛用規則（:is(#inventoryHostRoot,…) .card, … .inventory-section-card { padding:
   var(--ids-space-6); margin-bottom: var(--ids-space-6) }）完全相同 —— 而那支檔案在
   index.html 裡排在 inventory.css 之後，同分後者勝，於是這裡宣告的 16/20 與 margin-bottom:0
   從來沒有生效過，實測是 24px padding ＋ 24px margin。上面那段註解說的「scoped to Dashboard
   only via the #inventory-dashboard-* host ids」其實沒有寫進選擇器裡。這裡把它真的寫出來：
   多帶一層 .inventory-dashboard-lower，只鎖 Dashboard 的左右兩張卡，特異性也因此高於泛用規則，
   與檔案載入順序無關。不改 inventory-design.css，其他頁的 .inventory-section-card 一律不受影響。 */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-dashboard-lower .inventory-quickactions-card,
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-dashboard-lower .inventory-health-card {
  margin-bottom: 0;
  padding: var(--ids-space-4) var(--ids-space-5);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ids-space-2);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-item {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  width: 100%;
  padding: 9px var(--ids-space-3);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  background: var(--color-white);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-item:hover {
  border-color: var(--color-teal);
  box-shadow: var(--ids-shadow-xs);
  transform: translateY(-1px);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-icon {
  width: 28px;
  height: 28px;
  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) .inventory-quickaction-icon-blue {
  background: #e6f0fa;
  color: #1c5d8c;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-icon-green {
  background: #e3f5f1;
  color: #0e6d61;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-icon-orange {
  background: #fff6e5;
  color: #8a5a00;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-icon-purple {
  background: #f1eafb;
  color: #6b3fa0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-icon .inv-icon {
  width: 16px;
  height: 16px;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-label {
  flex: 1;
  min-width: 0;
  font-size: var(--ids-font-base);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-arrow .inv-icon {
  width: 16px;
  height: 16px;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-health-row {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  padding: var(--ids-space-2) 0;
  border-bottom: 1px solid var(--ids-border-soft);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-health-row:last-child {
  border-bottom: none;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-health-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) .inventory-health-icon .inv-icon {
  width: 16px;
  height: 16px;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-health-icon-green {
  background: #e3f5f1;
  color: #0e6d61;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-health-icon-yellow {
  background: #fdf6e0;
  color: #8a6d00;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-health-icon-purple {
  background: #f1eafb;
  color: #6b3fa0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-health-label {
  flex: 1;
  min-width: 0;
  font-size: var(--ids-font-base);
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-health-value {
  flex-shrink: 0;
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-navy);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-health-value-warning {
  color: #b3382c;
}
@media (max-width: 1280px) {
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-dashboard-lower {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-quickaction-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1100px) {
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Toolbar / search panel (generic page chrome, shared with .toolbar / .query-bar) */:is(#inventoryHostRoot, #inventoryOverlayRoot) .toolbar, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .query-bar, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-search-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}/* Step navigator — 5 steps, only step 1 open in Phase 1B-1. Compact card,
   no wrap at 1366px+ (labels + connectors shrink before wrapping). */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-step-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-item, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-circle, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-label {
  font-size: 13px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-item.active {
  color: var(--color-navy);
  font-weight: bold;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-item.active .step-circle, :is(#inventoryHostRoot, #inventoryOverlayRoot) .step-item.done .step-circle {
  background: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-connector, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-step-line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--color-border);
  margin: 0 10px;
  min-width: 16px;
}/* Generic section card (used by both left/right columns) */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card.compact {
  padding: 10px 16px;
  margin-bottom: 14px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-header {
  margin-bottom: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card-title, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--color-navy);
  margin-bottom: 3px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card-subtitle, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-description {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-subsection-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-text-muted);
  margin: 12px 0 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-subsection-title:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}/* Required-field asterisk */:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-required, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-field-required {
  color: var(--color-danger);
}/* Page-level 45% / 55% two-column layout (item-basic-page-specific — not
   part of the shared Foundation list), collapsing to one column when narrow */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-basic-columns {
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

@media (max-width: 1100px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-basic-columns {
    grid-template-columns: 1fr;
  }
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-basic-left, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-basic-right {
  min-width: 0;
}/* Image uploader — compact box (220-280px range), preview, readonly metadata */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-image-uploader {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .image-uploader-box {
  width: 320px;
  height: 320px;
  max-width: 100%;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .image-uploader-box.drag-over {
  border-color: var(--color-teal);
  background: #e3f5f1;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .image-uploader-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .image-uploader-empty, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-image-placeholder {
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
  padding: 0 16px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .image-uploader-empty-icon {
  font-size: 26px;
  margin-bottom: 8px;
  opacity: 0.55;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .image-uploader-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .image-uploader-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 8px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .image-meta-list {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .image-meta-list strong {
  color: var(--color-text);
  font-weight: normal;
  display: inline-block;
  min-width: 76px;
}/* Toggle switch (是否啟用) */:is(#inventoryHostRoot, #inventoryOverlayRoot) .toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toggle-slider {
  display: inline-block;
  width: 40px;
  height: 22px;
  background: var(--color-border);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s ease;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: var(--color-white);
  border-radius: 50%;
  transition: transform 0.15s ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toggle-switch input:checked + .toggle-slider {
  background: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toggle-label-text {
  font-size: 13px;
  color: var(--color-text);
}/* Category rule info card + badges */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-info-card, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-rule-card {
  background: #eef6fb;
  border: 1px solid #cfe0ec;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-info-card-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-navy);
  margin-bottom: 8px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-info-card-empty {
  font-size: 12px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-info-card-footer {
  margin-top: 12px;
  text-align: right;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-rule-badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-rule-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: bold;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-rule-badge::before {
  content: '✓';
}/* Tighter vertical rhythm, scoped to this page only (Supplier Drawer /
   Showcase page keep the roomier default spacing). */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-basic-page-root .field-grid, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-basic-page-root .inventory-form-grid, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .field-grid, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .inventory-form-grid {
  gap: 8px 12px;
  margin-bottom: 10px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-basic-page-root .field-grid textarea, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .field-grid textarea, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .inventory-form-field textarea {
  min-height: 42px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .inventory-section-card {
  padding: 14px;
  margin-bottom: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .inventory-section-title {
  margin-bottom: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .inventory-form-field label, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .inventory-field-label {
  margin-bottom: 3px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .inventory-form-field input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-shell .inventory-form-field select {
  padding: 6px 9px;
}/* Char counter */:is(#inventoryHostRoot, #inventoryOverlayRoot) .char-counter {
  text-align: right;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}/* Phase 3: replaces a former inline style="min-height:56px" on the item
   precautions textarea. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-precautions-textarea {
  min-height: 56px;
}/* Sticky footer bar (flex sibling of the scroll area — never overlaps content) */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-sticky-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 14px 18px;
  flex-shrink: 0;
  margin-top: 12px;
  gap: 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-sticky-footer-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-sticky-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}/* Visual divider before the primary "下一步" action */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-footer-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin: 0 2px;
}/* 辨識完整度 — UI-only star rating, computed from data already present on
   the page (no new API/field). */:is(#inventoryHostRoot, #inventoryOverlayRoot) .completeness-rating {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .completeness-rating .stars {
  color: #d9a441;
  font-size: 14px;
  letter-spacing: 1px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .completeness-rating .stars .star-empty {
  color: var(--color-border);
}/* Items list — thumbnail, view toggle, card grid */:is(#inventoryHostRoot, #inventoryOverlayRoot) .view-toggle-btn.active {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  display: block;
  margin: 0 auto;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0.5;
  color: var(--color-text-muted);
  background: var(--color-bg);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card .item-thumb-empty {
  font-size: 32px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-white);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card:hover {
  border-color: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card .item-thumb {
  width: 100%;
  height: 140px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card-body {
  padding: 10px 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card-code {
  font-size: 12px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card-name {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-navy);
  margin: 2px 0 6px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}/* ==========================================================================
   Supplier Management UI v1 (Phase 1A-UI). Aligns Supplier List/Drawer/
   Item-picker Dialog with the shared "inventory-*" Foundation already used
   by the Item pages. Reuses existing tokens/classes wherever possible; new
   rules here are additive and scoped so the Item list/pages are unaffected.
   ========================================================================== *//* Query panel — keep the 狀態 column compact instead of matching the wider
   text inputs next to it. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field.field-narrow {
  max-width: 140px;
}/* Roomier list rows for the Supplier table (opt-in via wrapper class so the
   Item list — same .data-table markup — is unaffected). */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-table-shell.roomy table.data-table th, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-table-shell.roomy table.data-table td {
  padding: 12px 12px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-cell-primary {
  font-weight: bold;
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-cell-secondary {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .text-right {
  text-align: right;
}/* Icon action buttons — 停用 uses a muted warning tone instead of full red,
   per spec ("不使用過度醒目的紅色文字"). */:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn.icon-btn-warn {
  color: #8a5a00;
}/* Drawer sizing: ~60vw within a sane min/max, full-width on small screens. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-panel, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-drawer-shell {
  width: 60vw;
  min-width: 820px;
  max-width: 1040px;
}

@media (max-width: 900px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-panel, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-drawer-shell {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-header-text {
  min-width: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}/* Tabs: never wrap to a second row — scroll horizontally instead, with the
   native scrollbar hidden for a cleaner look. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tabs::-webkit-scrollbar {
  display: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab-icon {
  font-size: 14px;
}/* Footer: optional left-side meta (建立/修改資訊), actions pinned right. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-footer {
  justify-content: space-between;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-footer-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-footer-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}/* Short numeric fields (付款天數／信用額度) shouldn't stretch to fill a
   whole grid column. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group.field-narrow, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field.field-narrow {
  max-width: 200px;
}/* Supplier item picker Dialog — thumbnail + name/code stack per row. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-row.selected {
  border-left: 3px solid var(--color-teal);
  padding-left: 9px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-info {
  min-width: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-code {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 1px;
}/* Sidebar — softer active state with a left accent bar instead of a solid
   bright fill; slightly tighter vertical rhythm. Purely visual: no change
   to nav routing / Feature Registry. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .sidebar-title {
  padding: 16px 16px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .nav-item {
  padding: 10px 16px;
  border-left: 4px solid transparent;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .nav-item.active {
  background: rgba(18, 137, 122, 0.35);
  border-left-color: var(--color-teal);
}
/* INVENTORY-UI-POLISH-001: .workspace-head-v211/.workspace-panel-v211 are
   Mainline-shared class names, but each module's <section> renders its own
   separate element under that class (confirmed structurally — #inventory's
   copy is not shared DOM with any other module), so scoping overrides under
   #inventory only ever touches Inventory's own header/panel, never another
   module's. The base rules in public/style.css are left untouched. */
#inventory .workspace-head-v211 .note {
  font-size: 12px;
  color: #9aa5b1;
}
#inventory .workspace-panel-v211.fin-shell {
  padding: 18px 20px;
}
/* INVENTORY-TRANSFER-FRONTEND-REALIZATION-001: TransferWorkspacePage.js.
   Deliberately its own class family (not the unstyled .inventory-tx-* set
   TransactionsPage.js uses — confirmed via grep to have zero CSS behind it
   anywhere in this module, the same "unstyled fallback" defect
   WarehousesPage.js's own header comment already documents and fixed for
   itself once — out of scope to touch TransactionsPage.js this round). */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-workspace {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--ids-space-4);
  align-items: start;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-create-card {
  margin-bottom: var(--ids-space-4);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-create-form .field-grid {
  margin-bottom: var(--ids-space-3);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-row-list {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-2);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-row {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  padding: var(--ids-space-3);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-row:hover {
  border-color: var(--color-teal);
  box-shadow: var(--ids-shadow-xs);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-row.is-selected {
  border-color: var(--color-teal);
  background: #eef8f7;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-row-main {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  margin-bottom: 4px;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-no {
  font-weight: 700;
  color: var(--color-navy);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-qty {
  margin-left: auto;
  font-weight: 700;
  color: var(--color-navy);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-row-line2 {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-dot {
  margin: 0 4px;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ids-space-2);
  margin-bottom: var(--ids-space-3);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-detail-title {
  font-size: var(--ids-font-lg);
  font-weight: 700;
  color: var(--color-navy);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ids-space-2) var(--ids-space-4);
  padding: var(--ids-space-3);
  background: var(--ids-surface-muted, #f6f8fa);
  border-radius: var(--ids-radius-md);
  margin-bottom: var(--ids-space-4);
  font-size: var(--ids-font-base);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-meta-note {
  grid-column: 1 / -1;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-meta-label {
  color: var(--color-text-muted);
  margin-right: 6px;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-detail-section-title {
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--ids-space-2);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-leg-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-sm);
  margin-bottom: var(--ids-space-2);
  font-size: var(--ids-font-base);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-leg-warehouse {
  flex: 1;
  min-width: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-leg-qty {
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-leg-no {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-detail-actions {
  margin-top: var(--ids-space-4);
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 1100px) {
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-transfer-workspace {
    grid-template-columns: 1fr;
  }
}

/* Goods Receipt Workspace — INVENTORY-GOODS-RECEIPT-WORKSPACE-001.
   Dedicated, newly-scoped classes reusing only already-confirmed-styled
   shared classes (.status-badge/.card/.query-field/.field-grid/
   .inventory-page-header/-title/-subtitle/.inventory-btn-primary/-secondary/
   .inventory-empty-state family) — never the unstyled-fallback
   `.inventory-tx-*` family TransactionsPage.js uses (see
   TransferWorkspacePage.js's own header comment for the prior finding this
   deliberately avoids repeating). */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-progress-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ids-font-sm);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-progress-table th {
  text-align: left;
  padding: var(--ids-space-2) var(--ids-space-3);
  color: var(--color-text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-progress-table td {
  padding: var(--ids-space-2) var(--ids-space-3);
  border-bottom: 1px solid var(--color-border);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-remaining-zero {
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-create-lines {
  margin-top: var(--ids-space-4);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-create-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ids-space-3);
  padding: var(--ids-space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-create-line-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-create-line-remaining {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-create-line input {
  width: 140px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--ids-radius-sm, 6px);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-workspace {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--ids-space-4);
  margin-top: var(--ids-space-4);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-row-list {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-2);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: var(--ids-space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--ids-radius-md, 8px);
  background: var(--ids-surface, #fff);
  cursor: pointer;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-row:hover {
  border-color: var(--color-primary);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-row.is-selected {
  border-color: var(--color-primary);
  background: var(--ids-surface-muted, #f6f8fa);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-row-main {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  font-weight: 600;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-no {
  color: var(--color-primary);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-row-line2 {
  display: flex;
  align-items: center;
  gap: var(--ids-space-1);
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-dot {
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ids-space-3);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-detail-title {
  font-size: var(--ids-font-lg);
  font-weight: 700;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ids-space-3);
  padding: var(--ids-space-3);
  background: var(--ids-surface-muted, #f6f8fa);
  border-radius: var(--ids-radius-md, 8px);
  margin-bottom: var(--ids-space-3);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-meta-note {
  grid-column: 1 / -1;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-meta-label {
  display: block;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-detail-section-title {
  font-weight: 600;
  margin-bottom: var(--ids-space-2);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-detail-line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ids-space-3);
  padding: var(--ids-space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-detail-line-qty {
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-detail-line-no {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}
@media (max-width: 1100px) {
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-workspace {
    grid-template-columns: 1fr;
  }
}

/* Transactions (Ledger List) — INVENTORY-PHASE2-STABILIZATION-PACK-001 §5.
   TransactionsPage.js has existed since Commit 5 and is already real/API-
   backed, but every class it renders (.inventory-tx-*, .inventory-status-
   badge) had zero matching CSS anywhere in this file — a known, previously
   disclosed defect (see TransferWorkspacePage.js's and GoodsReceiptWorkspacePage.js's
   own header comments, which both deliberately avoided reusing this same
   unstyled family). This block only adds the missing rules; TransactionsPage.js's
   own markup/DOM/behavior is untouched, and every class here is scoped to
   :is(#inventoryHostRoot, #inventoryOverlayRoot) exactly like every other
   Inventory page's CSS, reusing only the existing Design System tokens
   (--ids-*/--color-*) already used throughout this file. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-create-card {
  margin-bottom: var(--ids-space-4);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-create-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ids-space-3);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-create-form .query-field {
  min-width: 180px;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-list-card {
  padding: 0;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-row-list {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-2);
  padding: var(--ids-space-4);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--ids-space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--ids-radius-md, 8px);
  background: var(--ids-surface, #fff);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-row-main {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  font-weight: 600;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-no {
  color: var(--color-primary);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-qty {
  margin-left: auto;
  color: #0e6d61;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-qty.is-negative {
  color: #b3382c;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-row-line2 {
  display: flex;
  align-items: center;
  gap: var(--ids-space-1);
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-tx-dot {
  color: var(--color-text-muted);
}
/* Generic type badge — unlike .status-badge's active/inactive semantics,
   .inventory-status-badge here just labels a fixed transaction_type string
   (e.g. PURCHASE_IN), so it reuses the same visual language as the neutral
   .inventory-badge-warning tone rather than a green/red active/inactive
   pairing that wouldn't apply. */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--ids-font-xs);
  font-weight: 600;
  background: #fff6e5;
  color: #8a5a00;
}

/* INVENTORY-PHASE3-UAT-FIX-PACK-002 §3: 進貨單建立表單的「收貨數量／收貨單價」
   兩欄位並排，兩者皆可修改（價格留空才沿用採購單價）。 */
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-create-line-fields {
  display: flex;
  gap: var(--ids-space-3);
  flex-wrap: wrap;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-create-line-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  flex: 1 1 140px;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-receipt-create-line-field > span {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}

/* ===== CLINICOS-V4-MANUAL-UAT-BATCH5-1A ============================================
   即時庫存查詢／異動查詢的緊湊表格與共用 Item Picker。
   表格本體沿用共用的 .cos-table.compact-table，這裡只補這三處自己的排版。 */
.inv-stock-toolbar,
.inv-move-toolbar { margin-bottom: 12px; }
.inv-stock-filter,
.inv-move-filter { min-width: 0; }
.inv-stock-table-scroll,
.inv-move-table-scroll { overflow-x: auto; }
.inv-stock-table,
.inv-move-table { width: 100%; }
.inv-stock-qty,
.inv-move-qty { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-move-qty.is-negative { color: #b91c1c; }
.inv-move-code { margin-left: 6px; color: #64748b; font-size: 12px; }
.inv-stock-count,
.inv-move-count { margin-top: 8px; color: #64748b; font-size: 12px; }

/* Item Picker —— 行內、單選、可搜尋。選單相對於欄位定位，塞在進貨單每一列也不會撐版。 */
.inv-item-picker { position: relative; min-width: 0; }
.inv-item-picker-search { width: 100%; }
.inv-item-picker-menu {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
  max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid #d0d5dd; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .12);
}
.inv-item-picker-option {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 7px 10px; border: 0; background: transparent; cursor: pointer;
  text-align: left; font-size: 13px;
}
.inv-item-picker-option:hover { background: #eff6ff; }
.inv-item-picker-option-name { flex: 1 1 auto; min-width: 0; }
.inv-item-picker-option-code { flex: 0 0 auto; color: #64748b; font-size: 12px; }
.inv-item-picker-empty { padding: 10px; color: #64748b; font-size: 13px; }
.inv-item-picker-empty.is-error { color: #b91c1c; }

/* 篩選列在窄螢幕必須能收 —— 倉庫 <select> 會依最寬的選項撐開自己
   （選項含倉庫代碼時特別長），在 390 會把整頁推寬。這裡讓篩選列可換行，
   並限制控制項寬度；表格本身已由 .cos-scroll-x 負責水平捲動。 */
.inv-stock-toolbar .cos-toolbar__filters,
.inv-move-toolbar .cos-toolbar__filters { flex-wrap: wrap; min-width: 0; }
.inv-stock-filter,
.inv-move-filter { max-width: 100%; }
.inv-stock-filter select,
.inv-stock-filter input,
.inv-move-filter select,
.inv-move-filter input { max-width: 100%; }
.inv-stock-filter > select[data-inv-stock-warehouse],
.inv-move-filter > select[data-inv-move-type] { width: 100%; }

/* ===== CLINICOS-V4-MANUAL-UAT-BATCH5-1B 盤點單 ===================================== */
.inv-st-toolbar { margin-bottom: 12px; }
.inv-st-toolbar .cos-toolbar__filters { flex-wrap: wrap; min-width: 0; }
.inv-st-filter { min-width: 0; max-width: 100%; }
.inv-st-filter select, .inv-st-filter input { max-width: 100%; }
.inv-st-create { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin: 0 0 12px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.inv-st-table-scroll { overflow-x: auto; }
.inv-st-table { width: 100%; }
.inv-st-count { margin-top: 8px; color: #64748b; font-size: 12px; }
.inv-st-diff { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-st-diff.is-negative { color: #b91c1c; }
.inv-st-count-input { width: 96px; text-align: right; }
.inv-st-doc-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.inv-st-doc-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: #475467; }
.inv-st-doc-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.inv-st-doc-note, .inv-st-hint { margin: 8px 0; color: #64748b; font-size: 12px; }
.inv-st-msg { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: #ecfdf5; color: #065f46; font-size: 13px; }
.inv-st-msg.is-error { background: #fef2f2; color: #b91c1c; }

/* 盤點單工具列在窄螢幕要能整列換行 —— 外層同時放了篩選區與「新增盤點單」按鈕，
   只讓內層篩選換行不夠，外層也必須 wrap，否則 390 會被推寬幾個 px。 */
.inv-st-toolbar { flex-wrap: wrap; min-width: 0; }
.inv-st-toolbar .cos-toolbar__actions { flex-wrap: wrap; min-width: 0; }
.inv-st-create { max-width: 100%; }
.inv-st-doc-head { min-width: 0; }
.inv-st-doc-meta { min-width: 0; }

/* .cos-scroll-x 只有在父層寬度是「確定的」時才會真的把表格關進捲動區。
   卡片與其內容都補上 min-width:0 / max-width:100%，表格才不會把版面撐開。 */
.inv-st-card, .inv-stock-card, .inv-move-card { min-width: 0; max-width: 100%; overflow-x: hidden; }
.inv-st-card > *, .inv-stock-card > *, .inv-move-card > * { min-width: 0; max-width: 100%; }
.inv-st-table-scroll, .inv-stock-table-scroll, .inv-move-table-scroll { max-width: 100%; }

/* ===== CLINICOS-V4-MANUAL-UAT-BATCH5-1C 庫存調整單／報廢單 ========================= */
.inv-doc-card { min-width: 0; max-width: 100%; overflow-x: hidden; }
.inv-doc-card > * { min-width: 0; max-width: 100%; }
.inv-doc-toolbar { flex-wrap: wrap; min-width: 0; margin-bottom: 12px; }
.inv-doc-toolbar .cos-toolbar__filters,
.inv-doc-toolbar .cos-toolbar__actions { flex-wrap: wrap; min-width: 0; }
.inv-doc-filter { min-width: 0; max-width: 100%; }
.inv-doc-filter select, .inv-doc-filter input { max-width: 100%; }
.inv-doc-create,
.inv-doc-line-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; max-width: 100%;
  margin: 0 0 12px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.inv-doc-table-scroll { overflow-x: auto; max-width: 100%; }
.inv-doc-table { width: 100%; }
.inv-doc-count { margin-top: 8px; color: #64748b; font-size: 12px; }
.inv-doc-empty-cell { text-align: center; color: #64748b; }
.inv-doc-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; min-width: 0; }
.inv-doc-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: #475467; min-width: 0; }
.inv-doc-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.inv-doc-hint { margin: 8px 0; color: #64748b; font-size: 12px; }
.inv-doc-msg { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: #ecfdf5; color: #065f46; font-size: 13px; }
.inv-doc-msg.is-error { background: #fef2f2; color: #b91c1c; }