/* ==========================================================================
   Stage B-5.5 — Purchase Order Desktop UI (List + Editor + Items Grid).
   Self-contained: reuses shared Foundation classes untouched (.card,
   .inventory-section-card, .inventory-btn-*, .icon-btn, .field-grid,
   .field-group, .drawer-overlay/.dialog-panel-style layering, .chip,
   .status-chip) via the design tokens in inventory-design.css — does not
   redefine any of them, does not touch styles/purchase-order.css (the
   retired prototype's own stylesheet, left untouched per Stage B-5.5's
   "retire, don't modify" decision). All classes below are prefixed
   `po-desktop-` to avoid any collision with the prototype's `po-*` classes.
   ========================================================================== *//* ---- Status Badges (Ticket §Status UI: DRAFT=黃/CONFIRMED=藍/POSTED=綠/CANCELLED=灰) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--ids-radius-pill);
  font-size: var(--ids-font-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-badge-draft { background: #fff7e0; color: #9a6b00; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-badge-confirmed { background: #e6f0fb; color: #1d5fa8; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-badge-posted { background: #e3f5f1; color: #0e6d61; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-badge-cancelled { background: var(--ids-surface-muted); color: var(--color-text-muted); }/* Snapshot's own 4-value status (DRAFT/LOCKED/POSTED/VOIDED) — distinct
   enum from the PO's own status above, so a distinct (smaller, outline)
   badge style avoids visually implying they're the same thing. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-snapshot-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--ids-radius-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--ids-border-soft);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-snapshot-badge-posted { border-color: #b7e4da; color: #0e6d61; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-snapshot-badge-voided { border-color: #f0c9c3; color: var(--color-danger); }/* ---- List Page ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  flex-wrap: wrap;
  padding: var(--ids-space-4) var(--ids-space-5);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-search-wrap {
  position: relative;
  flex: 1 1 260px;
  min-width: 220px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-search-wrap .po-desktop-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-search-wrap input {
  width: 100%;
  height: 40px;
  padding: 0 var(--ids-space-4) 0 40px;
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  font-size: var(--ids-font-base);
  background: #fafafa;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-filter-select {
  height: 40px;
  padding: 0 var(--ids-space-3);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-sm);
  background: #fafafa;
  font-size: var(--ids-font-sm);
  min-width: 140px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-date-input {
  height: 40px;
  padding: 0 var(--ids-space-3);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-sm);
  background: #fafafa;
  font-size: var(--ids-font-sm);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-list-card {
  padding: var(--ids-space-2) var(--ids-space-5);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-list-header, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-row {
  display: grid;
  grid-template-columns: 140px 1fr 110px 130px 110px 110px 220px;
  gap: var(--ids-space-3);
  align-items: center;
  padding: var(--ids-space-3) var(--ids-space-1);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-list-header {
  font-size: var(--ids-font-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-row {
  border-bottom: 1px solid var(--ids-border-soft);
  transition: background var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-row:last-child { border-bottom: none; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-row:hover { background: var(--ids-surface-hover); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-row-no { font-weight: 700; color: var(--color-text); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-row-amount { font-variant-numeric: tabular-nums; text-align: right; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-row-actions .inventory-btn-ghost, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-row-actions .inventory-btn-secondary {
  height: 32px;
  padding: 0 var(--ids-space-3);
  font-size: 12px;
}/* ---- Editor Dialog ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 43, 68, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: ids-fade-in 200ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-panel {
  width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--ids-radius-lg);
  box-shadow: var(--ids-shadow-lg);
  overflow: hidden;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ids-space-5) var(--ids-space-6);
  background: var(--ids-surface-muted);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-title { font-size: var(--ids-font-lg); font-weight: 700; color: var(--color-navy); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--ids-space-5) var(--ids-space-6);
  background: #f6f8fa;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-header-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ids-space-4);
  margin-bottom: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-header-fields .field-group.full-width { grid-column: 1 / -1; }/* ---- Items Grid ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-wrap {
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  overflow: hidden;
  background: var(--color-white);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-header, :is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-row {
  display: grid;
  grid-template-columns: 2fr 90px 110px 120px 120px 1.3fr 1.3fr 44px;
  gap: var(--ids-space-2);
  align-items: center;
  padding: var(--ids-space-2) var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-header {
  background: var(--ids-surface-muted);
  font-size: var(--ids-font-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-row {
  border-top: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-cell { min-width: 0; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-cell-money { text-align: right; font-variant-numeric: tabular-nums; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-cell-muted { color: var(--color-text-muted); font-size: var(--ids-font-sm); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-input {
  width: 100%;
  height: 34px;
  padding: 0 var(--ids-space-2);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-sm);
  font-size: var(--ids-font-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: #fafafa;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-input:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: var(--ids-shadow-focus);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-input.invalid {
  border-color: var(--color-danger);
  background: #fdeee9;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-select {
  width: 100%;
  height: 34px;
  padding: 0 var(--ids-space-2);
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-sm);
  font-size: var(--ids-font-sm);
  background: #fafafa;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-grid-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--ids-space-3) 0;
}/* ---- Snapshot Read-only Panel ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-snapshot-panel {
  margin-top: var(--ids-space-4);
  padding: var(--ids-space-4) var(--ids-space-5);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-snapshot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ids-space-2) 0;
  border-bottom: 1px solid var(--ids-border-soft);
  font-size: var(--ids-font-sm);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-snapshot-row:last-child { border-bottom: none; }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-snapshot-label { color: var(--color-text-muted); }:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-snapshot-value { font-weight: 600; color: var(--color-text); }/* ---- Totals (bottom right, per Ticket) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: var(--ids-space-4) 0 0 auto;
  width: 260px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-totals-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-totals-row.total {
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-navy);
  padding-top: 6px;
  border-top: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-totals-value { font-variant-numeric: tabular-nums; }/* ---- Footer ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ids-space-3);
  padding: var(--ids-space-4) var(--ids-space-6);
  border-top: 1px solid var(--ids-border-soft);
  background: var(--color-white);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .po-desktop-footer-meta {
  margin-right: auto;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}