/* ==========================================================================
   ClinicOS Inventory Design System v1.0
   ==========================================================================
   Loaded AFTER inventory.css. Same brand colors (--color-navy/--color-teal/
   ...), same class names, same HTML structure — this file only refines
   spacing / radius / shadow / motion so the module reads like a calm
   clinical workspace (Apple / Notion / Linear) instead of a boxy admin
   template. No JS/API/DB/process logic lives here. The handful of new
   classes below (.inventory-btn-danger, .inventory-badge-draft/-outofstock,
   .inventory-card-header/-body/-footer, .inventory-empty-icon/-title/
   -description) are additive completions of the component set and are
   inert until a page opts in.
   ========================================================================== *//* --------------------------------------------------------------------
   13. Design Tokens
   -------------------------------------------------------------------- */:root {/* Spacing scale *//* Radius scale *//* Shadow scale — soft, diffuse, no hard edges *//* Motion *//* Typography scale (same font-family as body, just named steps) *//* Soft neutral surfaces for hover/muted backgrounds */
  
  --ids-space-1: 4px;
  --ids-space-2: 8px;
  --ids-space-3: 12px;
  --ids-space-4: 16px;
  --ids-space-5: 20px;
  --ids-space-6: 24px;
  --ids-space-8: 32px;

  
  --ids-radius-sm: 8px;
  --ids-radius-md: 12px;
  --ids-radius-lg: 16px;
  --ids-radius-pill: 999px;

  
  --ids-shadow-xs: 0 1px 2px rgba(18, 43, 68, 0.05);
  --ids-shadow-sm: 0 2px 6px rgba(18, 43, 68, 0.06);
  --ids-shadow-md: 0 6px 16px rgba(18, 43, 68, 0.09);
  --ids-shadow-lg: 0 16px 40px rgba(18, 43, 68, 0.14);
  --ids-shadow-focus: 0 0 0 3px rgba(18, 137, 122, 0.16);

  
  --ids-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ids-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  
  /* Phase 2: aliased onto the shared Mainline scale (public/design-tokens.css
     --cos-fs-*) instead of a second parallel set of pixel values — the
     literal px fallback after the comma only matters if design-tokens.css
     ever failed to load (it's always linked in index.html today). */
  --ids-font-xs: 13px;
  --ids-font-sm: var(--cos-fs-badge, 13px);
  --ids-font-base: var(--cos-fs-small, 14px);
  --ids-font-md: var(--cos-fs-label, 15px);
  --ids-font-lg: var(--cos-fs-card-title, 18px);
  --ids-font-xl: var(--cos-fs-section-title, 22px);
  --ids-font-page-title: var(--cos-fs-page-title, 28px);
  --ids-font-body: var(--cos-fs-body, 16px);

  --ids-lh-page-title: var(--cos-lh-page-title, 1.25);
  --ids-lh-section-title: var(--cos-lh-section-title, 1.3);
  --ids-lh-card-title: var(--cos-lh-card-title, 1.35);
  --ids-lh-body: var(--cos-lh-body, 1.5);
  --ids-lh-caption: var(--cos-lh-small, 1.45);
  --ids-lh-badge: var(--cos-lh-badge, 1.2);


  --ids-surface-muted: #f6f8f9;
  --ids-surface-hover: #eef6fb;
  --ids-border-soft: #e7ebee;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) * {
  -webkit-font-smoothing: antialiased;
}/* Inline outline SVG icon set (Icons.js) — sized via em so a button's
   font-size controls icon scale; stroke inherits currentColor. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inv-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.15em;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-empty-icon .inv-icon.empty-icon-lg, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-upload-dropzone .inv-icon.empty-icon-lg {
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
  opacity: 0.6;
}/* --------------------------------------------------------------------
   1. Page Header
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header {
  min-height: 40px;
  margin-bottom: var(--ids-space-5);
}/* Phase 2 hardening: the title's wrapping <div> is an unclassed flex
   child with the default min-width:auto — for a CJK string that's the
   width of a SINGLE character (browsers allow a line break between any
   two CJK characters unless told otherwise), so a wide toolbar (many
   buttons) could squeeze it down to one character per line at narrower
   viewport widths. white-space:nowrap + ellipsis on the title, and
   min-width:0 with flex:1 on its wrapper, keep the title on one line and
   truncate gracefully instead — the toolbar (flex-shrink:0) always keeps
   its own buttons unsqueezed either way. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-title, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header-title {
  font-size: var(--ids-font-page-title);
  line-height: var(--ids-lh-page-title);
  font-weight: var(--cos-fw-page-title, 700);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-subtitle, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header-subtitle {
  font-size: var(--ids-font-base);
  line-height: var(--ids-lh-caption);
  margin-top: var(--ids-space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-page-actions {
  flex-shrink: 0;
  gap: var(--ids-space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
}/* --------------------------------------------------------------------
   2. Inventory Card — Header / Body / Footer
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .card, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card {
  background: var(--color-white);
  border-color: var(--ids-border-soft);
  border-radius: var(--ids-radius-lg);
  box-shadow: var(--ids-shadow-xs);
  padding: var(--ids-space-6);
  margin-bottom: var(--ids-space-6);
  transition: box-shadow var(--ids-transition-base);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .card:hover, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card:hover {
  box-shadow: var(--ids-shadow-sm);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card.compact {
  padding: var(--ids-space-3) var(--ids-space-5);
}/* Card Header / Body / Footer slots. Existing pages already express a
   "header row" via .inventory-section-header / .tab-toolbar, so those are
   aliased here rather than requiring a markup change on every page. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-card-header, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-header, :is(#inventoryHostRoot, #inventoryOverlayRoot) .tab-toolbar {
  padding-bottom: var(--ids-space-3);
  margin-bottom: var(--ids-space-4);
  border-bottom: 1px solid var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-card-footer {
  margin-top: var(--ids-space-4);
  padding-top: var(--ids-space-4);
  border-top: 1px solid var(--ids-border-soft);
  display: flex;
  justify-content: flex-end;
  gap: var(--ids-space-3);
}/* --------------------------------------------------------------------
   3. Section Header
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card-title {
  font-size: var(--ids-font-lg);
  line-height: var(--ids-lh-card-title);
  font-weight: var(--cos-fw-card-title, 600);
  letter-spacing: -0.1px;
}/* .inventory-section-title (ItemBasicPage.js only) reads as a true page
   section heading, not a card sub-header — kept at the larger
   section-title step rather than merged into the card-title rule above,
   which is what the two selectors' shared declaration used to do. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-title {
  font-size: var(--ids-font-xl);
  line-height: var(--ids-lh-section-title);
  font-weight: var(--cos-fw-section-title, 600);
  letter-spacing: -0.1px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card-subtitle, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-description {
  margin-bottom: 0;
}/* Master Data UX shared Toolbar pieces (Phase 3 Item Management, reused
   as-is by Phase 3.2 Supplier Management — one shared definition instead
   of a copy per module). */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-result-count {
  font-size: var(--ids-font-base);
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: var(--ids-space-3);
}/* Replaces a former inline style="margin-top:12px;margin-bottom:0" on an
   advanced-filter form's own toolbar row. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-advanced-toolbar {
  margin-top: var(--ids-space-3);
  margin-bottom: 0;
}/* --------------------------------------------------------------------
   4. Form — Input / Textarea / Select / Toggle / Checkbox / Radio
   -------------------------------------------------------------------- */: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, :is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field select, :is(#inventoryHostRoot, #inventoryOverlayRoot) .form-row input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .form-row select {
  border-radius: var(--ids-radius-sm);
  border-color: var(--ids-border-soft);
  transition: border-color var(--ids-transition-fast), box-shadow var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group input:focus, :is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group select:focus, :is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group textarea:focus, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field input:focus, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field select:focus, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field textarea:focus, :is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field input:focus, :is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field select:focus, :is(#inventoryHostRoot, #inventoryOverlayRoot) .form-row input:focus, :is(#inventoryHostRoot, #inventoryOverlayRoot) .form-row select:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: var(--ids-shadow-focus);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .checkbox-group input[type="checkbox"], :is(#inventoryHostRoot, #inventoryOverlayRoot) .checkbox-group input[type="radio"], :is(#inventoryHostRoot, #inventoryOverlayRoot) .radio-group input[type="checkbox"], :is(#inventoryHostRoot, #inventoryOverlayRoot) .radio-group input[type="radio"], :is(#inventoryHostRoot, #inventoryOverlayRoot) .chip input[type="checkbox"] {
  accent-color: var(--color-teal);
  width: 15px;
  height: 15px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toggle-slider {
  transition: background var(--ids-transition-base);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .toggle-slider::before {
  transition: transform var(--ids-transition-base);
}/* --------------------------------------------------------------------
   5. Buttons — Primary / Secondary / Ghost / Danger / Icon
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .btn-secondary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-danger {
  border-radius: var(--ids-radius-sm);
  font-weight: 600;
  transition: background var(--ids-transition-fast), box-shadow var(--ids-transition-fast),
    border-color var(--ids-transition-fast), color var(--ids-transition-fast), transform var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn:hover, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary:hover {
  box-shadow: var(--ids-shadow-sm);
  transform: translateY(-1px);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn:active, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn-secondary:hover, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost:hover {
  color: var(--color-teal);
}/* New Danger variant completing the button set. Not wired into any page
   yet — reserved for future destructive actions. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-danger {
  background: var(--color-white);
  color: var(--color-danger);
  border: 1px solid #f0c9c3;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-danger:hover {
  background: #fbe8e6;
  border-color: var(--color-danger);
}/* Accessibility (Phase 2): keyboard focus indicator + disabled state were
   previously undefined for this button set — hover/active existed, but a
   Tab-key user had no visible indication of which button was focused, and
   a disabled button looked identical to an enabled one apart from color. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn:focus-visible, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary:focus-visible, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary:focus-visible, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost:focus-visible, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-danger:focus-visible {
  outline: 2px solid var(--color-teal, #12897a);
  outline-offset: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn:disabled, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary:disabled, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary:disabled, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost:disabled, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn {
  border-radius: var(--ids-radius-sm);
  transition: background var(--ids-transition-fast), transform var(--ids-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn:hover {
  transform: scale(1.08);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn .inv-icon {
  width: 17px;
  height: 17px;
}/* Icon + label buttons (Page Header / Toolbar actions) — icon sits before
   the text with a small gap. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary .inv-icon, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary .inv-icon, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost .inv-icon {
  width: 15px;
  height: 15px;
}/* --------------------------------------------------------------------
   6. 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, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-draft, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-outofstock {
  border-radius: var(--ids-radius-pill);
  font-weight: 600;
  letter-spacing: 0.2px;
}/* New variants completing the requested set (啟用/停用/警示 already existed
   as active/inactive/warning). Not wired into any page's data yet. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-draft {
  background: var(--ids-surface-muted);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-badge-outofstock {
  background: #fdeee9;
  color: #b3502c;
}/* --------------------------------------------------------------------
   7. Table — Header / Hover / Selected / Toolbar / Pagination
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-table-shell {
  border-radius: var(--ids-radius-md);
  border-color: var(--ids-border-soft);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) table.data-table th {
  font-size: var(--ids-font-xs);
  letter-spacing: 0.4px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--ids-surface-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) table.data-table tbody tr {
  transition: background var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) table.data-table tbody tr:hover {
  background: var(--ids-surface-hover);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) table.data-table tbody tr.selected {
  background: #e3f5f1;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .pagination-bar button {
  border-radius: var(--ids-radius-sm);
  transition: background var(--ids-transition-fast), border-color var(--ids-transition-fast);
}/* --------------------------------------------------------------------
   8. Empty State — Icon / Title / Description / CTA
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ids-space-8) var(--ids-space-4);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-empty-icon {
  font-size: 32px;
  opacity: 0.5;
  margin-bottom: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-empty-title {
  font-size: var(--ids-font-md);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--ids-space-1);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-empty-description {
  font-size: var(--ids-font-base);
  line-height: var(--ids-lh-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--ids-space-4);
  max-width: 360px;
  text-align: center;
}/* --------------------------------------------------------------------
   9. Drawer — Header / Tabs / Body / Sticky Footer
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-panel, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-drawer-shell {
  width: 55vw;
  min-width: 800px;
  max-width: 980px;
  border-radius: var(--ids-radius-lg) 0 0 var(--ids-radius-lg);
  box-shadow: var(--ids-shadow-lg);
}

@media (max-width: 860px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-panel, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-drawer-shell {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-overlay {
  transition: background var(--ids-transition-base);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-header {
  padding: var(--ids-space-5) var(--ids-space-6);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-close {
  border-radius: var(--ids-radius-sm);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ids-transition-fast);
}/* Icon Button spec (section 3): every icon-only control is 40x40, including
   the drawer's close button. */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-close {
  width: 40px;
  height: 40px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-close .inv-icon {
  width: 20px;
  height: 20px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-close:hover {
  background: var(--ids-surface-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tabs {
  padding: var(--ids-space-2) var(--ids-space-6) 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab {
  transition: color var(--ids-transition-fast), border-color var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-body {
  padding: var(--ids-space-5) var(--ids-space-6);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-footer {
  padding: var(--ids-space-4) var(--ids-space-6);
  box-shadow: 0 -4px 12px rgba(18, 43, 68, 0.04);
}/* --------------------------------------------------------------------
   10. Step Navigator — ClinicOS style (soft elevation + progress fill,
   not generic numbered dots)
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-circle, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-step-circle {
  width: 32px;
  height: 32px;
  box-shadow: var(--ids-shadow-xs);
  transition: background var(--ids-transition-base), transform var(--ids-transition-base),
    box-shadow var(--ids-transition-base);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-item.active .step-circle, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-step-item.active .inventory-step-circle {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(18, 137, 122, 0.14);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-connector, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-step-line {
  transition: background var(--ids-transition-base);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-item.done + .step-connector, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-step-item.done + .inventory-step-line {
  background: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .step-label {
  transition: color var(--ids-transition-base);
}/* --------------------------------------------------------------------
   11. Toast — unified style (single-toast queue behavior lives in
   InventoryToast.js; this is the visual layer only)
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .toast {
  border-radius: var(--ids-radius-md);
  box-shadow: var(--ids-shadow-md);
  display: flex;
  align-items: center;
  gap: var(--ids-space-2);
  animation: ids-toast-in var(--ids-transition-base);
}

@keyframes ids-toast-in {
  from  {
    opacity: 0;
    transform: translateY(-6px);
  }
  to  {
    opacity: 1;
    transform: translateY(0);
  }
}/* --------------------------------------------------------------------
   12. Motion — 150-200ms across the remaining interactive surfaces
   -------------------------------------------------------------------- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .nav-item {
  transition: background var(--ids-transition-fast), border-color var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .chip {
  transition: background var(--ids-transition-fast), border-color var(--ids-transition-fast),
    color var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card {
  transition: border-color var(--ids-transition-fast), box-shadow var(--ids-transition-fast),
    transform var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .item-card:hover {
  box-shadow: var(--ids-shadow-sm);
  transform: translateY(-2px);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-panel {
  border-radius: var(--ids-radius-lg);
  box-shadow: var(--ids-shadow-lg);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-row {
  border-radius: var(--ids-radius-sm);
  transition: background var(--ids-transition-fast), border-color var(--ids-transition-fast);
}/* ==========================================================================
   Supplier Management UI v2 — ClinicOS Visual Redesign. Large-card, soft
   layout replacing the v1 dense-table look. Builds on the existing
   Foundation classes (.card, .inventory-section-card, .field-grid, .chip,
   .toggle-switch, .status-badge, .drawer-*, .dialog-*) — nothing here
   changes their meaning, only adds new page-specific structural classes
   and re-styles the Drawer tabs/footer for the segmented/soft look.
   ========================================================================== *//* ---- Segmented Tabs (replaces the v1 underline tabs) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tabs {
  padding: var(--ids-space-3) var(--ids-space-6) var(--ids-space-2);
  border-bottom: none;
  gap: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab {
  border-radius: 11px;
  height: 42px;
  padding: 0 var(--ids-space-4);
  border-bottom: none;
  background: transparent;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab:hover {
  background: var(--ids-surface-hover);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab.active {
  background: #e3f5f1;
  color: #0e6d61;
  font-weight: 600;
  border-bottom: none;
}/* ---- Sticky Footer: white + hairline divider, no heavy shadow ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-footer {
  box-shadow: none;
  border-top: 1px solid var(--ids-border-soft);
}/* ---- Summary Cards ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ids-space-4);
  margin-bottom: var(--ids-space-5);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-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) .supplier-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) .supplier-summary-icon .inv-icon {
  width: 20px;
  height: 20px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-summary-value {
  font-size: var(--ids-font-xl);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-summary-label {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}/* ---- Search Card ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-card {
  padding: var(--ids-space-4) var(--ids-space-5);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-row {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  flex-wrap: wrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-input-wrap {
  position: relative;
  flex: 1 1 320px;
  min-width: 240px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-input-wrap .supplier-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-input-wrap input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  font-size: var(--ids-font-base);
  transition: border-color var(--ids-transition-fast), box-shadow var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-input-wrap input:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: var(--ids-shadow-focus);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .status-chip-group {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .status-chip {
  border: 1px solid var(--ids-border-soft);
  background: var(--color-white);
  color: var(--color-text-muted);
  border-radius: var(--ids-radius-pill);
  padding: 8px 16px;
  font-size: var(--ids-font-sm);
  cursor: pointer;
  transition: background var(--ids-transition-fast), border-color var(--ids-transition-fast), color var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .status-chip.active {
  background: #e3f5f1;
  border-color: var(--color-teal);
  color: #0e6d61;
  font-weight: 600;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-advanced-toggle {
  flex-shrink: 0;
  white-space: nowrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-advanced-chevron {
  transition: transform var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-advanced-toggle.open .supplier-advanced-chevron {
  transform: rotate(180deg);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-advanced-row {
  margin-top: var(--ids-space-4);
  padding-top: var(--ids-space-4);
  border-top: 1px solid var(--ids-border-soft);
}/* ---- Supplier Row List ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-list-card {
  padding: var(--ids-space-2) var(--ids-space-5);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-list {
  display: flex;
  flex-direction: column;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row {
  display: flex;
  align-items: center;
  gap: var(--ids-space-4);
  padding: var(--ids-space-4) var(--ids-space-1);
  border-bottom: 1px solid var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  transition: background var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row:last-child {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row:hover {
  background: var(--ids-surface-hover);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e3f5f1;
  color: #0e6d61;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-avatar-lg {
  width: 52px;
  height: 52px;
  font-size: 18px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-avatar-placeholder {
  background: var(--ids-surface-muted);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-avatar-placeholder .inv-icon {
  width: 20px;
  height: 20px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-main {
  flex: 1 1 220px;
  min-width: 180px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-name {
  font-size: var(--ids-font-md);
  font-weight: 700;
  color: var(--color-text);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-code {
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-dot {
  opacity: 0.6;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-secondary {
  flex: 2 1 420px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--ids-space-6);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-stat {
  font-size: var(--ids-font-sm);
  color: var(--color-text);
  white-space: nowrap;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-stat-label {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}/* ---- Supplier Profile Header (Drawer) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-header {
  display: flex;
  align-items: flex-start;
  gap: var(--ids-space-4);
  padding: var(--ids-space-5) var(--ids-space-6);
  background: var(--ids-surface-muted);
  border-radius: var(--ids-radius-lg) 0 0 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-text {
  flex: 1;
  min-width: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-title {
  font-size: var(--ids-font-lg);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-subtitle {
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-line3 {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}/* ---- Basic tab: 65/35 columns ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-basic-columns {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: var(--ids-space-4);
  align-items: start;
}

@media (max-width: 760px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-basic-columns {
    grid-template-columns: 1fr;
  }
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-basic-left, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-basic-right {
  min-width: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .profile-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ids-space-3) 0;
  border-bottom: 1px solid var(--ids-border-soft);
  font-size: var(--ids-font-sm);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .profile-summary-row:last-child {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .profile-summary-label {
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .profile-summary-value {
  font-weight: 600;
  color: var(--color-text);
}/* ---- Payment tab: two-column cards ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-two-col-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ids-space-4);
  align-items: start;
}

@media (max-width: 760px) {:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-two-col-cards {
    grid-template-columns: 1fr;
  }
}/* ---- Supplier Items tab: row list ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-item-row-list {
  display: flex;
  flex-direction: column;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-item-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);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-item-row:last-child {
  border-bottom: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-item-thumb {
  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) .supplier-item-info {
  flex: 1 1 200px;
  min-width: 140px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-item-stat {
  font-size: var(--ids-font-xs);
  color: var(--color-text);
  min-width: 70px;
}/* ---- Contact tab ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-contact-card-header {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
  margin-bottom: var(--ids-space-4);
  padding-bottom: 0;
  border-bottom: none;
}/* ---- Attachment dropzone (visual placeholder + empty state combined) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-upload-dropzone {
  border: 2px dashed var(--ids-border-soft);
  border-radius: var(--ids-radius-md);
  padding: var(--ids-space-8) var(--ids-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  background: var(--ids-surface-muted);
  transition: border-color var(--ids-transition-fast);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-upload-dropzone:hover {
  border-color: var(--color-teal);
}/* ---- Notes tab: Notion-style soft note area ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-notes-area {
  background: var(--ids-surface-muted);
  border-radius: var(--ids-radius-lg);
  padding: var(--ids-space-5);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-notes-area textarea {
  width: 100%;
  min-height: 280px;
  border: none;
  background: transparent;
  resize: vertical;
  font-size: var(--ids-font-base);
  font-family: inherit;
  outline: none;
  color: var(--color-text);
}/* ---- Item picker dialog: thumbnail + name/code + category/unit columns ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-row {
  display: grid;
  grid-template-columns: 40px 1fr 90px 70px;
  gap: var(--ids-space-3);
  align-items: center;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-thumb {
  width: 40px;
  height: 40px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-meta {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  text-align: right;
}/* ==========================================================================
   Supplier Module UI Polish v2 — visual-only refinement pass on top of the
   v2 redesign. No markup/behavior changes beyond what's needed to move the
   Profile Header dates and add Summary Card rows / a 3-line list row /
   Empty State secondary CTA (all pure display, wired to already-existing
   actions and already-loaded data). Appended last so it wins the cascade
   over every earlier rule in this file and in inventory.css.
   ========================================================================== *//* Phase 2: this block used to silently re-declare --ids-font-xl (22px ->
   28px) and a second, only-here --ids-font-card token, then re-declare
   .inventory-section-card-title/.inventory-section-title a second time so
   the cascade order (not the token block near the top of this file) is
   what actually won. Superseded by the single canonical rules above
   (dedicated --ids-font-page-title / --ids-font-lg / --ids-font-xl steps),
   removed here rather than left as dead, misleading duplicate CSS. A second
   .inventory-section-card override that duplicated background/padding/
   margin (plus a hardcoded box-shadow magic number bypassing the
   --ids-shadow-* tokens) was merged into the canonical rule near the top
   of this file instead of staying a second, cascade-order-dependent
   declaration. *//* ---- Drawer three-layer depth: background / card / input ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-body {
  background: #f6f8fa;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-header {
  padding-bottom: var(--ids-space-5);
  margin-bottom: var(--ids-space-5);
}/* ---- Button System: every variant shares height/radius/padding/font ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .btn, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .btn-secondary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-danger {
  height: 40px;
  padding: 0 var(--ids-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ids-radius-sm);
  font-size: var(--ids-font-sm);
  font-weight: 600;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost {
  border: 1px solid transparent;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost {
  gap: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-primary .inv-icon, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-secondary .inv-icon, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-ghost .inv-icon, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-btn-danger .inv-icon {
  width: 20px;
  height: 20px;
}/* Icon Button: fixed 40x40, 20px icon, always */:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--ids-radius-sm);
  transition: background 150ms ease, color 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn:hover {
  background: #eafbf7;
  color: var(--color-teal);
  transform: none;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn .inv-icon {
  width: 20px;
  height: 20px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn.icon-btn-danger, :is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn.icon-btn-warn {
  color: var(--color-danger);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn.icon-btn-danger:hover, :is(#inventoryHostRoot, #inventoryOverlayRoot) .icon-btn.icon-btn-warn:hover {
  background: #fbe8e6;
  color: var(--color-danger);
}/* ---- Input System: 40px height, ClinicOS-green focus, muted placeholder,
   readonly/disabled tone ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group select, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field select, :is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field input, :is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field select, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-input-wrap input {
  height: 40px;
  font-size: var(--ids-font-md);
  background: #fafafa;
  border-radius: var(--ids-radius-sm);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group textarea, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field textarea {
  font-size: var(--ids-font-md);
  background: #fafafa;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-input-wrap input {
  padding: 0 var(--ids-space-4) 0 40px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group input::placeholder, :is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group textarea::placeholder, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field input::placeholder, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field textarea::placeholder, :is(#inventoryHostRoot, #inventoryOverlayRoot) .query-field input::placeholder, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-input-wrap input::placeholder, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-notes-area textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group input:disabled, :is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group select:disabled, :is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group textarea:disabled, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field input:disabled, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field select:disabled, :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field textarea:disabled {
  background: #f5f6f7;
  color: #b0b8c1;
  cursor: not-allowed;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .field-group input[readonly], :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-form-field input[readonly] {
  background: #f1f3f5;
}/* ---- Tab System: icon + label, animated underline (not a button/pill) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tabs {
  border-bottom: 1px solid var(--ids-border-soft);
  gap: var(--ids-space-5);
  padding: 0 var(--ids-space-6);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab {
  height: 48px;
  padding: 0 2px;
  border-radius: var(--ids-radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  position: relative;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab .inv-icon {
  width: 20px;
  height: 20px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-teal);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 200ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab:hover {
  background: #eafbf7;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab.active {
  background: transparent;
  color: var(--color-teal);
  font-weight: 600;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-tab.active::after {
  transform: scaleX(1);
}/* ---- Chip: true Tag look — checkbox glyph hidden, outline when unselected,
   ClinicOS green when selected, soft green on hover ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .chip {
  border: 1px solid var(--ids-border-soft);
  background: transparent;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .chip input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .chip:hover {
  background: #eafbf7;
  border-color: var(--color-teal);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .chip:has(input:checked) {
  background: #e3f5f1;
  border-color: var(--color-teal);
  color: #0e6d61;
  font-weight: 600;
}/* ---- Summary Card: icon-led rows, no more empty whitespace ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .profile-summary-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ids-space-2);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .profile-summary-label .inv-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}/* ---- Profile Header: ~20% shorter, dates moved to a top-right block ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-header {
  padding: 22px var(--ids-space-6);
  gap: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 16px;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-line2 {
  margin-top: var(--ids-space-1);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-header-right {
  display: flex;
  align-items: flex-start;
  gap: var(--ids-space-3);
  flex-shrink: 0;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-profile-dates {
  text-align: right;
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  padding-top: 2px;
}/* ---- List Density: 3-line row, ~15% shorter, info consolidated ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row {
  padding: 5px var(--ids-space-1);
  gap: var(--ids-space-3);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-name {
  line-height: 1.2;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-line2, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-line3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  line-height: 1.2;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-line2 {
  font-size: var(--ids-font-sm);
  color: var(--color-text-muted);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-row-line3 {
  font-size: var(--ids-font-xs);
  color: var(--color-text-muted);
}/* ---- Empty State: primary + secondary CTA ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-empty-actions {
  display: flex;
  align-items: center;
  gap: var(--ids-space-3);
}/* ---- Animation: Drawer fade+slide, Card fade-in, 150ms everywhere else
   already covered by the transition declarations above ---- */


@keyframes ids-fade-in {
  from  {
    opacity: 0;
  }
  to  {
    opacity: 1;
  }
}

@keyframes ids-drawer-slide-in {
  from  {
    transform: translateX(28px);
    opacity: 0;
  }
  to  {
    transform: translateX(0);
    opacity: 1;
  }
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-overlay {
  animation: ids-fade-in 200ms ease;
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .drawer-panel {
  animation: ids-drawer-slide-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-section-card {
  animation: ids-fade-in 200ms ease;
}/* ---- Icon System: 20px everywhere a functional icon appears (Empty State
   illustrations are intentionally exempt — see section 13/empty-icon-lg) ---- */:is(#inventoryHostRoot, #inventoryOverlayRoot) .dialog-item-thumb .inv-icon, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-item-thumb .inv-icon, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-avatar-placeholder .inv-icon, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-search-icon.inv-icon, :is(#inventoryHostRoot, #inventoryOverlayRoot) .supplier-advanced-chevron.inv-icon {
  width: 20px;
  height: 20px;
}

/* CLINICOS-V4-NAVIGATION-SHELL-FINAL-FIX-INVENTORY
   Document Center 的頁首（盤點單／庫存調整單／效期管理）本輪掛上標準 .cos-page-header，
   返回鍵因此得以放進 Page Header 內，L4 版面順序才與其餘模組一致。

   標準契約在 @media(max-width:900px) 會把頁首改成 flex-direction:column ＋
   align-items:stretch。但上面既有的庫存規則以 ID 特異性把 align-items 鎖在 center，
   在欄向排列下子元素就不再被拉滿寬，改由自身 max-content 決定寬度並置中 ——
   副標題是 white-space:nowrap，max-content 等於整串文字（280px），而 600px 視窗下
   側欄佔去 309px、內容區只剩 227px，於是整條溢位（W7 的 600px 響應式因此翻紅）。

   只在窄視窗、且只對掛了標準類別的庫存頁首，把 align-items 還原成 stretch，
   並讓標題／副標題在寬度受限時以刪節號截斷。桌機版面與其他庫存頁完全不受影響。 */
@media (max-width: 900px) {
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header.cos-page-header {
    align-items: stretch;
  }
  /* 欄向排列下 align-items:stretch 仍會讓包裹層取 max-content（nowrap 副標題 280px），
     明確給定 width:100% 才會落在容器內容寬（227px），標題與副標題再由上面的
     overflow:hidden ＋ text-overflow:ellipsis 截斷。 */
  :is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header.cos-page-header > div:first-child {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header.cos-page-header .inventory-page-title.cos-page-header__title {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#inventoryHostRoot, #inventoryOverlayRoot) .inventory-page-header.cos-page-header .inventory-page-subtitle.cos-page-header__description {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}