#inventory-host {
  display: contents;
}

.inventory-menu-screen {
  width: min(100%, 1180px);
  display: none;
  background: #ffffff;
}

.inventory-menu-screen:target,
#inventory.inventory-active-fallback {
  display: block;
}

body:has(.inventory-menu-screen:target) .dashboard,
body:has(#inventory.inventory-active-fallback) .dashboard {
  display: none;
}

/*
 * Keep the Inventory parent and its child routes mutually exclusive during
 * hash changes. The fallback class can survive until the hashchange handler
 * runs, while :target changes immediately; without these guards both screens
 * can be painted for one frame and appear side-by-side.
 */
body:has(#sap-items:target) #inventory,
body:has(#supplier-po:target) #inventory,
body:has(#goods-received:target) #inventory,
body:has(#goods-issue:target) #inventory,
body:has(#warehouse-transfer:target) #inventory,
body:has(#bin-location:target) #inventory,
body:has(#inventory-adjustment:target) #inventory,
body:has(#item-master:target) #inventory,
body:has(#bill-of-materials:target) #inventory,
body:has(#inventory-dashboard:target) #inventory,
body:has(#supplier-po.supplier-po-active-fallback) #inventory,
body:has(#goods-received.goods-received-active-fallback) #inventory,
body:has(#goods-issue.goods-issue-active-fallback) #inventory,
body:has(#warehouse-transfer.warehouse-transfer-active-fallback) #inventory,
body:has(#bin-location.bin-location-active-fallback) #inventory,
body:has(#inventory-adjustment.inventory-adjustment-active-fallback) #inventory,
body:has(#bill-of-materials.bom-active-fallback) #inventory,
body:has(#inventory-dashboard.inventory-dashboard-active-fallback) #inventory {
  display: none !important;
}

/*
 * The inverse transition has the same one-frame risk: when returning to the
 * Inventory parent, stale child fallback classes can remain until their
 * hashchange listeners run. Hide only those stale fallback states while the
 * Inventory route is already active.
 */
body:has(#inventory:target) #supplier-po.supplier-po-active-fallback,
body:has(#inventory:target) #goods-received.goods-received-active-fallback,
body:has(#inventory:target) #goods-issue.goods-issue-active-fallback,
body:has(#inventory:target) #warehouse-transfer.warehouse-transfer-active-fallback,
body:has(#inventory:target) #bin-location.bin-location-active-fallback,
body:has(#inventory:target) #inventory-adjustment.inventory-adjustment-active-fallback,
body:has(#inventory:target) #bill-of-materials.bom-active-fallback,
body:has(#inventory:target) #inventory-dashboard.inventory-dashboard-active-fallback,
body:has(#inventory.inventory-active-fallback) #supplier-po.supplier-po-active-fallback,
body:has(#inventory.inventory-active-fallback) #goods-received.goods-received-active-fallback,
body:has(#inventory.inventory-active-fallback) #goods-issue.goods-issue-active-fallback,
body:has(#inventory.inventory-active-fallback) #warehouse-transfer.warehouse-transfer-active-fallback,
body:has(#inventory.inventory-active-fallback) #bin-location.bin-location-active-fallback,
body:has(#inventory.inventory-active-fallback) #inventory-adjustment.inventory-adjustment-active-fallback,
body:has(#inventory.inventory-active-fallback) #bill-of-materials.bom-active-fallback,
body:has(#inventory.inventory-active-fallback) #inventory-dashboard.inventory-dashboard-active-fallback {
  display: none !important;
}

#inventory .inventory-action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}

#inventory .inventory-card {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 10px 18px;
  border: 1px solid rgba(31, 111, 139, 0.16);
  border-radius: 10px;
  background: #ffffff;
  color: #103f52;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(22, 34, 42, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

#inventory .inventory-card strong {
  font-size: inherit;
  font-weight: 700;
}

#inventory .inventory-card:hover,
#inventory .inventory-card:focus-visible {
  background: #d7ecee;
  border-color: rgba(31, 111, 139, 0.18);
  box-shadow: 0 12px 24px rgba(16, 63, 82, 0.16);
  outline: none;
  transform: translateY(-1px);
}

#accounting .inventory-action-grid {
  grid-template-columns: repeat(2, minmax(220px, 280px));
}

@media (max-width: 900px) {
  #inventory .inventory-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #inventory .inventory-action-grid,
  #accounting .inventory-action-grid {
    grid-template-columns: 1fr;
  }
}

.inventory-low-stock-panel {
  margin-top: 8px;
  border: 1px solid #cfe0e7;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.inventory-low-stock-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.inventory-low-stock-heading h2 {
  margin: 0;
  color: #103f52;
  font-size: 16px;
}

#lowStockItemsStatus {
  color: var(--muted);
  font-size: 12px;
}

.inventory-low-stock-wrap {
  max-height: 280px;
}

.inventory-low-stock-wrap table {
  min-width: 920px;
}

.inventory-low-stock-wrap th,
.inventory-low-stock-wrap td {
  padding: 4px 6px;
  font-size: 12px;
}


/* Inventory Management Flow image viewer */
.inventory-flow-button {
  white-space: nowrap;
}

body.inventory-flow-open {
  overflow: hidden;
}

.inventory-flow-modal[hidden] {
  display: none !important;
}

.inventory-flow-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.inventory-flow-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 22, 34, 0.76);
  backdrop-filter: blur(2px);
}

.inventory-flow-dialog {
  position: relative;
  width: min(96vw, 1600px);
  height: min(94vh, 1100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #b9cdd6;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.inventory-flow-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid #d7e2e7;
  background: #ffffff;
}

.inventory-flow-heading {
  min-width: 0;
}

.inventory-flow-heading h2 {
  margin: 0;
  color: #103f52;
  font-size: 18px;
  line-height: 1.2;
}

.inventory-flow-heading span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.inventory-flow-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.inventory-flow-actions .small-button {
  min-width: 38px;
  margin: 0;
}

.inventory-flow-actions .inventory-flow-zoom-label {
  min-width: 60px;
  font-variant-numeric: tabular-nums;
}

.inventory-flow-actions .inventory-flow-close {
  min-width: 40px;
  font-size: 20px;
  line-height: 1;
}

.inventory-flow-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background: #eef3f6;
  overscroll-behavior: contain;
  cursor: grab;
}

.inventory-flow-stage.inventory-flow-dragging {
  cursor: grabbing;
  user-select: none;
}

.inventory-flow-image-wrap {
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.inventory-flow-image {
  display: block;
  max-width: none;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(28, 52, 67, 0.12);
}

.inventory-flow-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #9e2330;
  background: #fff7f8;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.inventory-flow-error[hidden] {
  display: none !important;
}

.inventory-flow-dialog:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  border: 0;
  border-radius: 0;
}

@media (max-width: 760px) {
  .inventory-flow-modal {
    padding: 0;
  }

  .inventory-flow-dialog {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .inventory-flow-toolbar {
    align-items: flex-start;
    padding: 8px;
  }

  .inventory-flow-heading span {
    display: none;
  }

  .inventory-flow-actions {
    gap: 4px;
  }

  .inventory-flow-actions .small-button {
    min-width: 34px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .inventory-flow-stage {
    padding: 8px;
  }
}