/* Keep active navigation readable even on very bright theme accents. */
.tabs .tab.active {
  background: color-mix(in srgb, var(--accent) 68%, #17202b 32%) !important;
  border-color: color-mix(in srgb, var(--accent) 76%, #ffffff 24%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.42) !important;
}

.tabs .tab:not(.active) {
  color: var(--text) !important;
}

/* Keep the preview beside the label while placing Change at the far edge. */
.materialProfileGrid .profileColorPick .unifiedColorSelected {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.materialProfileGrid .profileColorPick .colorToggle {
  margin-left: auto !important;
}

/* The current mask is generated from the logo geometry: move every layer together. */
.appLogoImage,
.logoThemeMask,
.logoPriceOverlay {
  transform: translateX(10.4%) !important;
}

.inventoryTable tbody tr:not(:has(.inventoryEmpty)) {
  cursor: pointer;
}

.inventoryTable tbody tr:not(:has(.inventoryEmpty)):hover {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-sub)) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

.inventoryItemDialogBackdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2,6,12,.68);
  backdrop-filter: blur(7px);
}

.inventoryItemDialog {
  width: min(720px, 100%);
  max-height: min(860px, calc(100vh - 44px));
  overflow: auto;
  border: 1px solid var(--edge-strong);
  border-radius: 22px;
  background: var(--surface-main);
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0,0,0,.38), inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent);
}

.inventoryDialogHeader {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.inventoryDialogColor {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: var(--item-color);
  border: 2px solid color-mix(in srgb,#fff 70%,transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--item-color) 18%,transparent);
}

.inventoryDialogHeading { min-width: 0; flex: 1; }
.inventoryDialogHeading h3 { margin: 0; font-size: 1.2rem; }
.inventoryDialogHeading p { margin: 4px 0 0; color: var(--muted); }
.inventoryDialogClose { width: 38px; height: 38px; padding: 0 !important; border-radius: 11px !important; }

.inventoryDialogBody { padding: 22px; }
.inventoryDialogDetails { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.inventoryDialogDetail { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-sub); }
.inventoryDialogDetail span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.inventoryDialogDetail strong { display: block; overflow-wrap: anywhere; font-size: .94rem; }
.inventoryDialogDetail .stockStatus { display: inline-flex; }

.inventoryDialogActions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 22px 22px; }
.inventoryDialogActions .btn { width: auto !important; min-width: 104px; }
.inventoryDialogActions .btn.danger { margin-left: auto; }

.inventoryDialogEditForm { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 0 22px 22px; }
.inventoryDialogEditForm[hidden], .inventoryDialogDetails[hidden], .inventoryDialogActions[hidden] { display: none !important; }
.inventoryDialogEditForm .full { grid-column: 1 / -1; }
.inventoryDialogEditButtons { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; }
.inventoryDialogEditForm input, .inventoryDialogEditForm select { width: 100%; }

@media (max-width: 620px) {
  .inventoryItemDialogBackdrop { padding: 10px; }
  .inventoryDialogDetails, .inventoryDialogEditForm { grid-template-columns: 1fr; }
  .inventoryDialogEditForm .full, .inventoryDialogEditButtons { grid-column: 1; }
  .inventoryDialogActions .btn { flex: 1; min-width: 0; }
  .inventoryDialogActions .btn.danger { margin-left: 0; }
}