/* ==========================================================================
   Item Center UI Prototype V1.3 — Final UX Polish Before Freeze
   (Inventory Phase 1B-Center-UI)
   ==========================================================================
   Pure UI/UX layer — list data still comes from the existing item GET API,
   stock/purchasing/warehouse/movement figures are still static Prototype
   data. V1.3 only polishes density/hover/animation, no business logic
   changed. Reuses the existing shared Foundation classes from
   inventory-design.css untouched (.inventory-section-card, .inventory-btn-*,
   .icon-btn, .drawer-*, .status-badge, .status-chip, .profile-summary-row,
   .field-grid, .inventory-empty-state, .query-field, .supplier-search-card,
   .supplier-advanced-*) — only new item-center-specific structural classes
   live here, and any override of a shared class (Drawer tab icon size/hover,
   sticky tabs) is scoped under #item-drawer-tabs / #item-drawer-overlay so
   the frozen Warehouse and Supplier Drawers are never affected.

   V1.3 cleanup pass (dev rule 二.4/二.5): consolidated the V1.2 file —
   removed the item-row-stat-wide selector (no longer used since the row
   groups dropped their "wide" cells this pass), removed the duplicate
   item-drawer-panel-slide animation (the shared .drawer-panel in
   inventory-design.css already animates every drawer, so this was a
   redundant second slide stacked on top of it — dropped instead of kept).
   No !important anywhere in this file.
   ========================================================================== *//* ---- View mode toggle (active state) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .view-toggle-btn.active {
  background: #e3f5f1;
  border-color: var(--color-teal);
  color: #0e6d61;
}/* ---- Status dot (section 十): 6px dot prefixing a status badge ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .status-badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}/* ---- Summary Cards (5 tiles, each with a two-item breakdown sub-line) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ids-space-4);
  margin-bottom: var(--ids-space-5);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-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) .item-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) .item-summary-icon .inv-icon {
  width: 20px;
  height: 20px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-summary-value {
  font-size: var(--ids-font-xl);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-summary-label {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-summary-sub {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  opacity: 0.85;
  margin-top: 1px;
  white-space: nowrap;
}/* ---- Category quick chips: horizontal, hidden native scrollbar ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-category-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: var(--ids-space-4);
  scrollbar-width: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-category-chip-row::-webkit-scrollbar {
  display: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-category-chip {
  flex-shrink: 0;
  white-space: nowrap;
}/* ---- Search / Filter card: two compact rows + inline Quick Tags
   (section 十一) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-search-card {
  padding: var(--ids-space-3) var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-search-row-1, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-search-row-2 {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  flex-wrap: wrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-search-row-1 {
  align-items: flex-end;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-search-row-2 {
  margin-top: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-search-input-wrap {
  flex: 1 1 260px;
  min-width: 200px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-quick-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-quick-tag.active {
  background: #e3f5f1;
  border-color: var(--color-teal);
  color: #0e6d61;
}/* ---- List mode: column layout (row-top + Quick Status Strip) with a
   bottom divider between items ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-list {
  display: flex;
  flex-direction: column;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row {
  display: flex;
  flex-direction: column;
  padding: 6px var(--ids-space-2);
  border-bottom: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  transition: background 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row:last-child {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-top {
  display: flex;
  align-items: center;
  gap: var(--ids-space-4);
}/* ---- Hover (section 二十): soft cyan background, image scales up to
   1.04, name darkens, action labels reveal ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row:hover {
  background: var(--ids-surface-hover);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row:hover .item-row-thumb, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row:hover .item-row-thumb.item-thumb-placeholder {
  transform: scale(1.04);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row:hover .item-row-name {
  color: var(--color-navy);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row.is-inactive {
  opacity: 0.7;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--ids-radius-md);
  object-fit: cover;
  border: 1px solid var(--ids-border-soft);
  flex-shrink: 0;
  transition: transform 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ids-surface-muted);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-left {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  flex: 2 1 240px;
  min-width: 200px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-text {
  min-width: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-line1 {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  flex-wrap: wrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-name {
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-text);
  transition: color 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-line2 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-code {
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-line3 {
  margin-top: 3px;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}/* ---- Compact 2x2 stat groups (section 八) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-group {
  flex: 1 1 160px;
  min-width: 150px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-stat {
  font-size: var(--ids-font-sm);
  color: var(--color-text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-stat-label {
  display: block;
  font-size: var(--ids-font-xs);
  line-height: 1.2;
  color: var(--color-text-muted);
}/* ---- Row actions: icons always visible, text label reveals on Item Row
   hover (section 九). All three buttons share the same padding/font so
   their expanded widths line up naturally (labels are all 2 characters). ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-action-btn {
  width: auto;
  padding: 0 10px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-action-label {
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
  font-size: var(--ids-font-xs);
  white-space: nowrap;
  transition: width 150ms ease, opacity 150ms ease, margin-left 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row:hover .item-row-action-label, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-action-btn:focus-visible .item-row-action-label {
  width: 28px;
  opacity: 1;
  margin-left: 4px;
}/* ---- Quick Status Strip (section 七): one line, icon+text segments,
   ellipsis overflow, full text available via the wrapper's title attr ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  padding-left: 112px;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-strip .inv-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-strip-sep {
  color: var(--ids-border-soft);
  margin: 0 2px;
}/* ---- More menu (dropdown popover, fixed-position) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-more-menu {
  position: fixed;
  z-index: 900;
  min-width: 168px;
  background: var(--color-white);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  box-shadow: var(--ids-shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-more-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  padding: 8px 10px;
  border-radius: var(--ids-radius-sm);
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: var(--ids-font-sm);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-more-menu-item:hover {
  background: var(--ids-surface-hover);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-more-menu-item.danger {
  color: var(--color-danger);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-more-menu-item .inv-icon {
  width: 16px;
  height: 16px;
}/* ---- Card mode (section 十二: 120-140px image, badge next to name) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-lg);
  overflow: hidden;
  background: var(--color-white);
  transition: box-shadow 150ms ease, transform 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card:hover {
  box-shadow: var(--ids-shadow-md);
  transform: translateY(-2px);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card:hover .item-center-card-thumb {
  transform: scale(1.04);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-thumb {
  width: 100%;
  height: 132px;
  object-fit: cover;
  display: block;
  transition: transform 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) div.item-center-card-thumb.item-thumb-placeholder {
  height: 132px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-thumb.item-thumb-placeholder .inv-icon {
  width: 30px;
  height: 30px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-body {
  padding: var(--ids-space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-name {
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-code {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-badge {
  align-self: flex-start;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-meta {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 var(--ids-space-3) var(--ids-space-3);
}/* ---- Item Quick View Drawer: Profile Header (section 十三: 96x96 image,
   3 lines, hide-if-empty) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-profile-header {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  padding: 12px var(--ids-space-6);
  background: var(--ids-surface-muted);
  border-radius: var(--ids-radius-lg) 0 0 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-profile-thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--ids-radius-md);
  object-fit: cover;
  border: 1px solid var(--ids-border-soft);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-profile-text {
  flex: 1;
  min-width: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-profile-line1 {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-profile-title {
  font-size: var(--ids-font-lg);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-profile-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.2;
  flex-wrap: wrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-profile-line3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.2;
  flex-wrap: wrap;
}/* ---- Drawer Tabs: 20px icon + hover + sticky (section 十五) — scoped to
   the Item Center Drawer only via #item-drawer-tabs, so the shared
   .drawer-tab used by the frozen Warehouse/Supplier Drawers is untouched.
   The shared Drawer already only scrolls inside .drawer-body (Header and
   Tabs sit outside that scroll region), so Tabs never actually scroll out
   of view; position:sticky here is a defensive reinforcement of that same
   guarantee, not a structural change. ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) #item-drawer-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-white);
  border-bottom: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) #item-drawer-tabs .drawer-tab .inv-icon {
  width: 20px;
  height: 20px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) #item-drawer-tabs .drawer-tab:not(.active):hover {
  background: var(--ids-surface-hover);
  color: var(--color-teal);
}/* ---- 品項摘要 tab: read-only info rows (no inputs — quick view only) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ids-space-3);
  padding: var(--ids-space-2) 0;
  border-bottom: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-info-row:last-child {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-info-label {
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 90px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-info-value {
  font-size: var(--ids-font-sm);
  color: var(--color-text);
  text-align: right;
}/* ---- 品項摘要 tab (右側): Dashboard — 4 titled blocks with a soft-gray
   divider between them, replacing the V1.2 flat 14-row list
   (section 十四) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-dash-card {
  display: flex;
  flex-direction: column;
  gap: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-dash-block {
  background: var(--ids-surface-muted);
  border-radius: var(--ids-radius-sm);
  padding: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-dash-block-title {
  font-size: var(--ids-font-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-dash-block-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-dash-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-dash-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-dash-stat-label .inv-icon {
  width: 15px;
  height: 15px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-dash-stat-value {
  font-size: var(--ids-font-sm);
  font-weight: 600;
  color: var(--color-text);
}/* ---- 庫存分布 tab (section 十六) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-stock-row {
  display: flex;
  align-items: center;
  gap: var(--ids-space-4);
  padding: var(--ids-space-3) var(--ids-space-1);
  border-bottom: 1px solid var(--ids-border-soft);
  flex-wrap: wrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-stock-row:last-of-type {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-stock-row-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ids-radius-sm);
  border: 1px solid var(--ids-border-soft);
  background: var(--ids-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-stock-row-info {
  flex: 1 1 160px;
  min-width: 130px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-stock-row-stat {
  font-size: var(--ids-font-xs);
  color: var(--color-text);
  min-width: 72px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-tab-note {
  margin-top: var(--ids-space-3);
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  padding: var(--ids-space-3);
  background: var(--ids-surface-muted);
  border-radius: var(--ids-radius-sm);
}/* ---- 供應商與採購 tab (section 十七) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-supplier-card {
  margin-bottom: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-supplier-empty-mini {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  padding: var(--ids-space-3);
  background: var(--ids-surface-muted);
  border-radius: var(--ids-radius-sm);
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
}/* ---- 預警與效期 tab (section 十八: 5-tier color coding + summary banner) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-summary {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  padding: var(--ids-space-3);
  border-radius: var(--ids-radius-md);
  font-size: var(--ids-font-sm);
  font-weight: 600;
  margin-bottom: var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-summary.tier-success { background: #e3f5f1; color: #0e6d61; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-summary.tier-warning { background: #fff6e5; color: #8a5a00; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-summary.tier-danger { background: #fbe8e6; color: #b3382c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-summary.tier-orange { background: #fdeee9; color: #b3502c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ids-space-3);
  margin-bottom: var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-card {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  padding: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-icon {
  width: 36px;
  height: 36px;
  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) .item-alert-value {
  font-size: var(--ids-font-lg);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-label {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}/* 正常=綠／低庫存=黃／缺貨=紅／即將到期=橘／已過期=深紅 — shades of the
   existing ClinicOS status-badge palette, no new brand color introduced. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-card.tier-success .item-alert-icon { background: #e3f5f1; color: #0e6d61; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-card.tier-warning .item-alert-icon { background: #fff6e5; color: #8a5a00; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-card.tier-danger .item-alert-icon { background: #fbe8e6; color: #b3382c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-card.tier-orange .item-alert-icon { background: #fdeee9; color: #b3502c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-card.tier-deepred .item-alert-icon { background: #f3d0cb; color: #7a1f14; }/* ---- 異動紀錄 tab (section 十九: typed Timeline with connector line) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-timeline {
  display: flex;
  flex-direction: column;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--ids-space-3);
  padding: var(--ids-space-3) var(--ids-space-1);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-icon-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-icon-col::after {
  content: '';
  position: absolute;
  top: 36px;
  bottom: -12px;
  width: 2px;
  background: var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-entry.is-last .item-movement-icon-col::after {
  display: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--ids-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #eef6fb;
  color: var(--color-navy);
  z-index: 1;
}/* 進貨=綠／盤點=藍／耗用=橘／報廢=紅／退貨=紫灰 — muted shades, no new
   saturated brand color; blue and purple-gray are the only two additions
   beyond the existing palette, both kept soft to match the ClinicOS style. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-icon[data-type="進貨"] { background: #e3f5f1; color: #0e6d61; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-icon[data-type="盤點"] { background: #e6f0fa; color: #1c5d8c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-icon[data-type="耗用"] { background: #fdeee9; color: #b3502c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-icon[data-type="報廢"] { background: #fbe8e6; color: #b3382c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-icon[data-type="退貨"] { background: #efeef5; color: #5b5473; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-type[data-type="進貨"] { color: #0e6d61; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-type[data-type="盤點"] { color: #1c5d8c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-type[data-type="耗用"] { color: #b3502c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-type[data-type="報廢"] { color: #b3382c; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-type[data-type="退貨"] { color: #5b5473; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-body {
  flex: 1;
  min-width: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-top {
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-type {
  font-size: var(--ids-font-sm);
  font-weight: 600;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-qty {
  font-size: var(--ids-font-sm);
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-meta {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-note {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-when {
  flex-shrink: 0;
  text-align: right;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-date {
  font-size: var(--ids-font-xs);
  color: var(--color-text);
  font-weight: 600;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-movement-time {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
}/* ---- Animation (section 二十): Tab 150ms fade, Card/Thumb hover scale
   150ms (set above). Drawer slide (200/220ms) already comes from the
   shared .drawer-panel animation in inventory-design.css — not duplicated
   here. Scoped to the Item Center Drawer only via #item-drawer-body. ---- */


@keyframes item-tab-fade-in {
  from  { opacity: 0; }
  to  { opacity: 1; }
}:is(#inventoryHostRoot, #inventoryOverlayRoot) #item-drawer-body.tab-fade-in {
  animation: item-tab-fade-in 150ms ease;
}/* Respect prefers-reduced-motion: turn off transform-based motion (image
   scale-up, card lift) and shorten the tab fade to effectively instant.
   The shared .drawer-panel slide animation lives in inventory-design.css,
   outside this phase's file scope, so it cannot be disabled from here —
   documented as a known limitation in the completion report. */


@media (prefers-reduced-motion: reduce) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-thumb, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-name, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-thumb, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-action-label {
    transition: none;
  }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row:hover .item-row-thumb, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row:hover .item-row-thumb.item-thumb-placeholder, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card:hover .item-center-card-thumb, :is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card:hover {
    transform: none;
  }:is(#inventoryHostRoot, #inventoryOverlayRoot) #item-drawer-body.tab-fade-in {
    animation-duration: 1ms;
  }
}/* ---- Responsive (section 二十一: 1280–1920 keep proportion, no squeeze) ---- */


@media (max-width: 1600px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-group {
    flex-basis: 148px;
    min-width: 140px;
  }
}

@media (max-width: 1280px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-strip {
    padding-left: 0;
  }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-action-label {
    display: none;
  }
}

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

@media (max-width: 900px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-center-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-top {
    flex-wrap: wrap;
  }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-row-group {
    flex-basis: 45%;
  }:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-alert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}