/* Demo-only adjustments for the inventory module (hand-written, not generated). Keep empty unless a
   difference against the real app cannot be fixed by matching its DOM / widget options. */

/* @retalia/media lib-image-media-item-selector - the library's own component styles (shipped inside the
   npm package, so not part of the generated components.css). Copied from the running app. */
.pui--inventory lib-image-media-item-selector .thumbnail { display: inline-block; background: #eee; border: 1px solid transparent; padding: 2px; }
.pui--inventory lib-image-media-item-selector .thumbnail-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.pui--inventory lib-image-media-item-selector .thumbnail:hover { background: #adb5bd; border: 2px solid #d0d0d0; }
.pui--inventory lib-image-media-item-selector .buttonContainer { width: 250px; padding: 2px; display: flex; gap: 8px; justify-content: space-between; }

/* Angular injects a component's styles only once that component has rendered. stock-lookup.component.scss
   has unscoped ::ng-deep `main { padding: 2em }` / `.im-button` rules that the real app only gets after the
   Stock Lookup page (not in the sidebar) was opened; components.css carries them from the start. */
:where(.pui--inventory) main { padding: 0; border-top-width: medium; box-sizing: content-box; }
:where(.pui--inventory) .im-button { margin-top: 0; }

/* Tailwind (demo shell) generates .mt-2; InventoryUI_V2 has no such utility, the class is inert there. */
.pui--inventory .mt-2 { margin-top: 0; }

/* shell.css gives .pui PortalUI's normalize line-height (1.15); InventoryUI_V2 loads no normalize.css. */
.pui.pui--inventory { line-height: normal; }

/* Tailwind generates .pb-10 (used by item-details-matrix-matrix, inert in the real app). */
.pui--inventory .pb-10 { padding-bottom: 0; }

/* purchase-order-details.component.ts has no selector (Angular renders <ng-component>), so tools/build-ui-css.mjs
   skips its stylesheet. Same SCSS compiled with Angular encapsulateStyle, id "inventory-ng-component". */
[_nghost-inventory-ng-component]   .page[_ngcontent-inventory-ng-component] {
  padding: 0 16px;
  box-sizing: border-box;
}

.po-header[_ngcontent-inventory-ng-component] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
}
.po-header[_ngcontent-inventory-ng-component]   .po-header__title[_ngcontent-inventory-ng-component] {
  flex: 1 1 auto;
  min-width: 12rem;
}
.po-header[_ngcontent-inventory-ng-component]   .po-header__actions[_ngcontent-inventory-ng-component] {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.data-container[_ngcontent-inventory-ng-component] {
  margin: 15px 0px 15px 0px;
}

.uploadFileInput[_ngcontent-inventory-ng-component] {
  display: none;
}

.validation-errors[_ngcontent-inventory-ng-component]   .validation-error-title[_ngcontent-inventory-ng-component] {
  font-size: 20px;
  color: gray;
  font-weight: bold;
}

.errorMessage[_ngcontent-inventory-ng-component] {
  margin-bottom: 10px;
}
.errorMessage.error[_ngcontent-inventory-ng-component] {
  color: red;
}
.errorMessage.warning[_ngcontent-inventory-ng-component] {
  color: orange;
}
.errorMessage.hint[_ngcontent-inventory-ng-component] {
  color: aqua;
}

.indicator[_ngcontent-inventory-ng-component] {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-top: 5px;
}
.indicator.error[_ngcontent-inventory-ng-component] {
  background-color: red;
}
.indicator.warning[_ngcontent-inventory-ng-component] {
  background-color: orange;
}
.indicator.hint[_ngcontent-inventory-ng-component] {
  background-color: aqua;
}
.indicator.none[_ngcontent-inventory-ng-component] {
  background-color: lime;
}

.message-count[_ngcontent-inventory-ng-component] {
  display: grid;
  grid-template-columns: max-content 1fr;
  justify-items: left;
  gap: 0.5em;
}

.addItemsToGridContainer[_ngcontent-inventory-ng-component] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-barcode-container[_ngcontent-inventory-ng-component] {
  display: flex;
  align-items: center;
}

.input-container[_ngcontent-inventory-ng-component] {
  position: relative;
  display: inline-block;
}

.custom-button-container[_ngcontent-inventory-ng-component] {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 2px;
  margin-right: 35px;
}

.po-line-action-buttons[_ngcontent-inventory-ng-component] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.po-line-action-buttons[_ngcontent-inventory-ng-component]     .dx-button {
  min-width: 26px;
}
.po-line-action-buttons[_ngcontent-inventory-ng-component]     .dx-button .dx-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.po-line-action-buttons[_ngcontent-inventory-ng-component]     .dx-button .dx-icon {
  margin: 0;
}