/* Inventory Overlay Portal — Commit 6 UAT fix.
   Scopes every Drawer/Dialog/Floating-Menu rule under #inventoryOverlayRoot
   instead of #inventoryHostRoot. Root cause: an ancestor inside Mainline's
   Workspace/Page Host chain constrains position:fixed children to its own
   box instead of the true viewport, which is exactly why the Drawer
   rendered squeezed into the bottom-left with a large blank Workspace area
   below it. Moving the overlay's mount point to a body-level root (a
   sibling of every Mainline page <section>, added in index.html) sidesteps
   that ancestor entirely. Page-body content keeps using #inventoryHostRoot
   as before — nothing in this file touches that selector. */

/* ---- Drawer (Supplier / Item / Operating Entity) ---- */
#inventoryOverlayRoot .drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 43, 68, 0.35);
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
}
#inventoryOverlayRoot .drawer-panel,
#inventoryOverlayRoot .inventory-drawer-shell {
  /* Issue #006: a flat 770px could still exceed the viewport on a narrower
     desktop window (the 100vw-40px max-width only caught the extreme case);
     min() keeps a 780px cap while always leaving 320px of visible Workspace
     to the left of the Drawer, same as before, but never forcing a
     page-level horizontal scrollbar to reach it. */
  width: min(780px, calc(100vw - 320px));
  min-width: 0;
  max-width: calc(100vw - 24px);
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white, #fff);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}
@media (max-width: 900px) {
  #inventoryOverlayRoot .drawer-panel,
  #inventoryOverlayRoot .inventory-drawer-shell {
    width: calc(100vw - 40px);
  }
}
/* Drawer Header spacing (ported from #inventoryHostRoot .drawer-header —
   only re-scoped, values unchanged) */
#inventoryOverlayRoot .drawer-header,
#inventoryOverlayRoot .profile-header,
#inventoryOverlayRoot .supplier-profile-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ids-border-soft, #e7ebee);
}
/* Drawer Tabs spacing (ported from #inventoryHostRoot .drawer-tab) */
#inventoryOverlayRoot .drawer-tabs {
  flex: 0 0 auto;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 24px;
  border-bottom: 1px solid var(--ids-border-soft, #e7ebee);
}
#inventoryOverlayRoot .drawer-tab {
  height: 48px;
  padding: 0 14px;
  border-radius: var(--ids-radius-sm, 6px);
  background: transparent;
  color: var(--color-text-muted, #6b7280);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
#inventoryOverlayRoot .drawer-tab.active {
  color: var(--color-teal, #0e6d61);
  font-weight: 600;
}
#inventoryOverlayRoot .drawer-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--color-teal, #0e6d61);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 200ms ease;
}
#inventoryOverlayRoot .drawer-tab.active::after {
  transform: scaleX(1);
}

/* Icon size — fixed 20px everywhere inside a Drawer, regardless of any
   ambient font-size/line-height Mainline's own CSS might otherwise
   contribute (that ambient inheritance is exactly what made icons
   inconsistent before this rule existed). */
#inventoryOverlayRoot .inv-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  vertical-align: -0.15em;
}
#inventoryOverlayRoot .inventory-empty-icon .inv-icon.empty-icon-lg,
#inventoryOverlayRoot .supplier-upload-dropzone .inv-icon.empty-icon-lg {
  width: 40px !important;
  height: 40px !important;
  color: var(--color-text-muted, #6b7280);
  opacity: 0.6;
}
#inventoryOverlayRoot .drawer-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ids-radius-sm, 6px);
}
#inventoryOverlayRoot .drawer-close:hover {
  background: var(--ids-surface-muted, #f6f8f9);
}

/* Profile Summary — normal two-column row (label left, value right) */
#inventoryOverlayRoot .profile-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ids-border-soft, #e7ebee);
  font-size: 13px;
}
#inventoryOverlayRoot .profile-summary-row:last-child {
  border-bottom: none;
}
#inventoryOverlayRoot .profile-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted, #6b7280);
}
#inventoryOverlayRoot .profile-summary-value {
  font-weight: 600;
  color: var(--color-text, #101828);
}
#inventoryOverlayRoot .drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px;
  min-height: 0;
  min-width: 0;
}
#inventoryOverlayRoot .drawer-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--ids-border-soft, #e5e7eb);
}
#inventoryOverlayRoot .drawer-footer-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

/* ---- Supplier basic-tab two-column form grid ---- */
#inventoryOverlayRoot .supplier-basic-columns {
  display: grid;
  /* Issue #006: a fluid minmax(0,7fr)/minmax(0,3fr) split still let the
     right column's content (labels/values) push the track past its share
     on a narrow Drawer width; a fixed 240px right rail (Section C spec)
     removes that ambiguity — the left column absorbs all remaining space
     and is the only one allowed to shrink. */
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#inventoryOverlayRoot .supplier-basic-left,
#inventoryOverlayRoot .supplier-basic-right {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#inventoryOverlayRoot .field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#inventoryOverlayRoot .field-group {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#inventoryOverlayRoot .field-group.full-width {
  grid-column: 1 / -1;
}
#inventoryOverlayRoot .field-group input,
#inventoryOverlayRoot .field-group select,
#inventoryOverlayRoot .field-group textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  #inventoryOverlayRoot .supplier-basic-columns {
    grid-template-columns: 1fr;
  }
}

/* ---- Simple centered dialog (Supplier Item / confirm dialogs) ---- */
#inventoryOverlayRoot .dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 43, 68, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
}
#inventoryOverlayRoot .dialog-panel {
  width: 480px;
  max-width: min(92vw, 480px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white, #fff);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
#inventoryOverlayRoot .dialog-panel.si-dialog-panel {
  /* Issue #013 spec: fixed viewport-relative box instead of the base
     .dialog-panel's 480px/80vh — this is the only dialog wide enough to
     need its own explicit ceiling. */
  width: min(720px, calc(100vw - 48px));
  max-width: min(720px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Supplier Item picker (SupplierItemDialog.js) ----
   Issue #013 root cause: .si-dialog-body used to set its own
   max-height:65vh + overflow-y:auto, and .si-row-list (nested inside it)
   ALSO set max-height:320px + overflow-y:auto — two independent scroll
   regions fighting each other, which is exactly what produced the multiple
   scrollbars / broken row heights reported. The body must not scroll at
   all; only .si-row-list scrolls, and it must be the one flexible region
   between the fixed toolbar above and the fixed detail panel below. */
#inventoryOverlayRoot .si-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* #supplier-item-list is a plain, class-less container (SupplierItemDialog
   .js's own render target) whose only two children are .si-list-toolbar
   and .si-row-list — it must itself flex to fill the remaining body space
   so .si-row-list's flex:1 1 auto has something real to fill. */
#inventoryOverlayRoot .si-dialog-body #supplier-item-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#inventoryOverlayRoot .si-list-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ids-space-2, 8px) 0;
  border-bottom: 1px solid var(--ids-border-soft, #e5e7eb);
  margin-bottom: var(--ids-space-2, 8px);
}
#inventoryOverlayRoot .si-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ids-font-sm, 13px);
  color: var(--color-text, #101828);
}
#inventoryOverlayRoot .si-selected-count {
  font-size: var(--ids-font-sm, 13px);
  font-weight: 600;
  color: var(--color-teal, #0e6d61);
}
#inventoryOverlayRoot .si-row-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Grid, not flex: a fixed track per column is what actually prevents the
   "row height randomly enlarges" / "checkbox-code-name scattered" symptoms
   — flex tracks with no explicit basis let long text content (item_name /
   specification) grow the row unpredictably instead of truncating in a
   fixed column. */
#inventoryOverlayRoot .si-row {
  display: grid;
  grid-template-columns:
    36px
    90px
    minmax(160px, 1fr)
    minmax(90px, 140px)
    80px
    72px;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ids-border-soft, #e5e7eb);
  cursor: pointer;
  font-size: var(--ids-font-sm, 13px);
}
#inventoryOverlayRoot .si-row:last-child {
  border-bottom: none;
}
#inventoryOverlayRoot .si-row:hover {
  background: var(--ids-surface-hover, #f6f8f9);
}
#inventoryOverlayRoot .si-row.disabled {
  cursor: not-allowed;
  color: var(--color-text-muted, #6b7280);
  background: var(--ids-surface-muted, #f6f8f9);
}
#inventoryOverlayRoot .si-row-checkbox {
  justify-self: center;
}
#inventoryOverlayRoot .si-row-code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted, #6b7280);
  font-size: var(--ids-font-xs, 12px);
}
#inventoryOverlayRoot .si-row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-text, #101828);
}
#inventoryOverlayRoot .si-row.disabled .si-row-name {
  color: var(--color-text-muted, #6b7280);
  font-weight: 400;
}
#inventoryOverlayRoot .si-row-spec {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ids-font-xs, 12px);
  color: var(--color-text-muted, #6b7280);
}
#inventoryOverlayRoot .si-row-unit {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ids-font-xs, 12px);
  color: var(--color-text-muted, #6b7280);
}
#inventoryOverlayRoot .si-row-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ids-font-xs, 12px);
  color: var(--color-teal, #0e6d61);
  text-align: right;
}
#inventoryOverlayRoot .si-detail-panel {
  flex: 0 0 auto;
  margin-top: var(--ids-space-4, 16px);
  padding-top: var(--ids-space-3, 12px);
  border-top: 1px solid var(--ids-border-soft, #e5e7eb);
}
#inventoryOverlayRoot .si-detail-title {
  font-size: var(--ids-font-sm, 13px);
  font-weight: 700;
  color: var(--color-navy, #1a2b47);
  margin-bottom: var(--ids-space-2, 8px);
}
#inventoryOverlayRoot .dialog-panel.si-dialog-panel .dialog-footer {
  flex: 0 0 auto;
  position: static;
}

/* ---- Floating dropdown menu (Item list "more" menu) ---- */
#inventoryOverlayRoot .item-more-menu {
  position: fixed;
  z-index: 2050;
  min-width: 168px;
  background: var(--color-white, #fff);
  border: 1px solid var(--ids-border-soft, #e5e7eb);
  border-radius: var(--ids-radius-md, 8px);
  box-shadow: var(--ids-shadow-md, 0 4px 12px rgba(0,0,0,.15));
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---- Purchase Order Editor (already has its own complete sizing —
   only re-scoped here so it renders from the Overlay Portal). ---- */
#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: 2100;
}
#inventoryOverlayRoot .po-desktop-panel {
  width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white, #fff);
  border-radius: var(--ids-radius-lg, 12px);
  box-shadow: var(--ids-shadow-lg, 0 12px 32px rgba(0,0,0,.2));
}