.planogramcontainerHidden {
  display: none;
  visibility: hidden;
}
/* .planogramContainer {
  width: 100%;
  height: 100%;
  background-color: lightgrey;
  position: fixed;
  top: 50px;
  left: 60px;
  z-index: 9;
  overflow: scroll;
} */
.planogramContainer {
  position: relative;
}
/* .planogramInnerWrapper {
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  position: relative;
  z-index: 9;
  overflow: scroll;
} */
.planogramInnerWrapper {
  position: relative;
}
.planogramInnerWrapper .item_green {
  position: relative;
  height: 160px;
  background-color: #37ca5999;
  text-align: center;
  margin: 5px;
  float: left;
  box-shadow: 2px 3px 5px grey;
  border-radius: 5px;
}
.planogramInnerWrapper .item_green:hover {
  top: -2px;
  z-index: 1;
  cursor: pointer;
}

.planogramInnerWrapper .item_amber {
  position: relative;
  height: 160px;
  background-color: #ffe77aa3;
  text-align: center;
  margin: 5px;
  float: left;
  box-shadow: 2px 3px 5px grey;
  border-radius: 5px;
}
.planogramInnerWrapper .item_amber:hover {
  top: -2px;
  z-index: 1;
  cursor: pointer;
}

.planogramInnerWrapper .item_red {
  position: relative;
  height: 160px;
  background-color: #f24c5da1;
  text-align: center;
  margin: 5px;
  float: left;
  box-shadow: 2px 3px 5px grey;
  border-radius: 5px;
}
.planogramInnerWrapper .item_red:hover {
  top: -2px;
  z-index: 1;
  cursor: pointer;
}
.planogramToolBar {
  position: relative;
  width: 100%;
  /* height: 50px; */
  /* background: #46627d; */
  /* margin-bottom: 20px; */
  flex: 1 1 0%;
  height: 32px;
  /* max-width: 1620px; */
  /* min-width: 1620px; */
  display: flex;
  flex-direction: row;
}
.planogramOptions {
  background-color: lightslategrey !important;
  border: 0px solid !important;
  font-size: 12px !important;
  height: 27px;
}
.planogramOptions:hover {
  background-color: rgba(119, 136, 153, 0.849) !important;
}
.planogramOptionsMenu {
  position: absolute !important;
  top: 33px;
  background-color: white;
  z-index: 10;
  font-size: 12px;
}
.planogramOptionsMenuHidden {
  display: none !important;
  visibility: hidden;
}
.planogramOptionsMenu a {
  color: #343957 !important;
}
.planogramOptionsMenu a:hover {
  color: #637dfc !important;
}

.planogramOptionsMenuDivider {
  width: 100%;
  height: 1px;
  margin-bottom: 5px;
  box-shadow: 0px 10px 10px;
}
.planogramSettings {
  color: #637dfc !important;
}
.planogramSubmit {
  margin-left: 2px;
  margin-right: 2px;
  font-size: 12px !important;
  height: 27px;
}
#cancelAllPlanogramChanges {
  font-size: 12px !important;
  height: 27px;
}
.planogramToolBar div {
  position: relative;
}
.totalStockValue {
  font-size: 12px;
  padding: 5px;
  left: 50px;
  width: 184px;
}
.itemTotals {
  width: fit-content;
  display: flex;
  gap: 5px;
  height: fit-content;
  padding: 2px;
}
.hide-column {
  display: none !important;
}
.item-totals-tooltip {
  --bs-tooltip-bg: white !important;
  --bs-tooltip-color: #343957 !important;
  --bs-tooltip-max-width: 1000px !important; /* Set max-width using CSS variable */
  opacity: 1 !important;
  box-shadow: 5px 5px 5px grey !important;
  --bs-tooltip-border-radius: 2px !important;
  background-color: white !important;
}
.item-totals-tooltip .tooltip-inner {
  max-width: 1000px !important;
  /* width: max-content !important; */
  text-align: left !important;
  /* padding: 10px !important; */
  font-size: 12px !important;
  background-color: white !important;
  width: 170px;
}
/* .tooltip-inner ul li{
  float: left;
} */
.tooltip-inner {
  max-width: 100% !important;
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  color: var(--bs-tooltip-color);
  text-align: left !important;
  background-color: #24263cf2 !important;
  /* width: max-content !important; */
  border-radius: var(--bs-tooltip-border-radius);
  padding: 10px !important;

}

#greenItemTotals {
  background-color: #28a745 !important;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  left: 5px;
  position: relative;
  color: white;
  line-height: 25px;
  font-family: monospace;
  font-size: small;
  text-align: center;
  font-weight: 900;
  -moz-box-shadow: 0 0 2px rgb(0, 0, 0);
  -webkit-box-shadow: 0 0 2px rgb(0, 0, 0);
  box-shadow: 0 0 2px rgb(0, 0, 0);
  cursor: pointer;
}
#amberItemTotals {
  background-color: #ffc107 !important;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  left: 5px;
  position: relative;
  color: white;
  line-height: 25px;
  font-family: monospace;
  font-size: small;
  text-align: center;
  font-weight: 900;
  -moz-box-shadow: 0 0 2px rgb(0, 0, 0);
  -webkit-box-shadow: 0 0 2px rgb(0, 0, 0);
  box-shadow: 0 0 2px rgb(0, 0, 0);
  cursor: pointer;
}
#redItemTotals {
  background-color: #dc3545 !important;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  left: 5px;
  position: relative;
  color: white;
  line-height: 25px;
  font-family: monospace;
  font-size: small;
  text-align: center;
  font-weight: 900;
  -moz-box-shadow: 0 0 2px rgb(0, 0, 0);
  -webkit-box-shadow: 0 0 2px rgb(0, 0, 0);
  box-shadow: 0 0 2px rgb(0, 0, 0);
  cursor: pointer;
}
.closePlanogram {
  position: relative;
  float: left;
  color: white;
  padding: 7px;
  padding-left: 10px;
}
.closePlanogram:hover {
  color: #f24c5d;
  cursor: pointer;
}
.planogramTitle {
  color: white;
  font-size: 18px;
  height: 50px;
  position: relative;
  left: 20px;
  line-height: 2.8;
}
.switchPlanogramView {
  margin-left: 19px;
  height: 27px;
  line-height: 0 !important;
  padding: 6px !important;
  padding-top: 4px !important;
  font-size: 19px !important;
  background-color: #778899 !important;
  border: 0px !important;
}
.itemRow {
  flex: 1 1 0%;
  /* max-width: 1620px;
  min-width: 1620px; */
  display: flex;
  min-height: 0px;
  flex-direction: row;
}
.item_selection {
  position: relative;
  top: 5px;
  left: 5px;
  width: 80%;
  font-family: monospace;
  font-size: 12px;
  text-align: left;
  
  /* --- ADD THESE LINES --- */
  display: flex;          /* Use Flexbox for alignment */
  align-items: center;    /* Vertically align items in the middle */
  gap: 0px;               /* Add a 5px gap between each item */
}
.item_selection_table{
  position: static !important;
  display: table-cell !important;
}
#cancelSwap {
  width: 24px;
  background: lightgrey;
  padding: 0px;
  border-color: lightgray;
  box-shadow: 0px 0px 2px black;
  color: black;
}
#cancelSwap:hover {
  color: red;
  box-shadow: 0px 0px 2px red;
}
.cancelSwap {
  font-size: 14px;
}
.tableCancelSwap {
  float: right;
  margin-right: 8px !important;
  margin-top: 1px;
  height: 24px;
}
.sales-stats-container {
  display: flex;
  width: 100%;           /* Spans full width of the parent */
  justify-content: center; /* Centers the row of badges horizontally */
  align-items: center;
  gap: 0;                /* Set to 0 if you want them to touch like a single bar */
}
.greenIcon, .amberIcon, .redIcon {
  flex: 1;               /* Makes all badges take up equal width */
  max-width: 40px;       /* Prevents them from getting too wide in large containers */
  height: 25px;          /* Adjusted height for a "bar" look */
  line-height: 25px;     /* Matches height to center text vertically */
  border-radius: 2px;    /* Slight rounding for a modern square look */
  color: white;
  font-family: monospace;
  font-size: 11px;       /* "small" can be inconsistent, px is safer here */
  text-align: center;
  font-weight: 900;
  display: inline-block;
}

.greenIcon {
  background-color: #28a745 !important;
  border: 1px solid #1e7e34; /* Darker green border */
}

.amberIcon {
  background-color: #f39c12 !important;
  border: 1px solid #d35400;
  color: white;           /* Improved contrast for yellow background */
}

.redIcon {
  background-color: #dc3545 !important;
  border: 1px solid #bd2130; /* Darker red border */
}
.salesGreenIcon{
  background-color: #28a745 !important;
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  /* border: 2px solid rgba(64, 184, 92, 0.534); */
  position: relative;
  /* margin-left: 2px; */
  color: white;
  line-height: 21px;
  font-family: monospace;
  font-size: small;
  text-align: center;
  font-weight: 900;
  -moz-box-shadow: 0 0 2px rgb(0, 0, 0);
  -webkit-box-shadow: 0 0 2px rgb(0, 0, 0);
  box-shadow: 0 0 2px rgb(0, 0, 0);
}
.salesAmberIcon{
  background-color: #dc3545 !important;
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  /* border: 2px solid rgba(64, 184, 92, 0.534); */
  position: relative;
  /* margin-left: 2px; */
  color: white;
  line-height: 21px;
  font-family: monospace;
  font-size: small;
  text-align: center;
  font-weight: 900;
  -moz-box-shadow: 0 0 2px rgb(0, 0, 0);
  -webkit-box-shadow: 0 0 2px rgb(0, 0, 0);
  box-shadow: 0 0 2px rgb(0, 0, 0);
}
.salesRedIcon{
  background-color: #dc3545 !important;
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  /* border: 2px solid rgba(64, 184, 92, 0.534); */
  position: relative;
  /* margin-left: 2px; */
  color: white;
  line-height: 21px;
  font-family: monospace;
  font-size: small;
  text-align: center;
  font-weight: 900;
  -moz-box-shadow: 0 0 2px rgb(0, 0, 0);
  -webkit-box-shadow: 0 0 2px rgb(0, 0, 0);
  box-shadow: 0 0 2px rgb(0, 0, 0);
}
.item-totals-tooltip .tooltip-inner span {
  display: inline-block;
  /* float: left; */
  margin-bottom: 3px;
  background-color: white;
}
.itemInfo {
  position: absolute;
  bottom: 23px;
  left: 4px;
  float: left;
  z-index: 9;
}
.itemInfo i {
  position: relative;
  color: lightgray;
  background-color: black;
  /* border: 0px solid grey; */
  border-radius: 100%;
  height: 15px;
  display: flex;
}
.product_image {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;

  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 76px;
  margin: auto;
  position: relative;
  top: 5px;
  font-weight: 999;

  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}
.image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1 1 0%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}
.item-soldout {
  position: absolute;
  max-width: 118px;
  width: 85%;
}
/* .product_image div {
  width: 20px;
  height: 20px;
  color: rgb(139, 83, 0);
} */
/* When both images are present */
.product_image:has(.image-wrapper.target) .image-wrapper.original {
  flex: 0 0 50%; /* Don't grow, don't shrink, width 60% */
}

.product_image:has(.image-wrapper.target) .image-wrapper.target {
  flex: 0 0 50%; /* Don't grow, don't shrink, width 40% */
  opacity: 0.5;
}

.product_image:has(.image-wrapper.target) .image-wrapper.target img {
  max-width: 40%; /* Target image is smaller */
}

.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;

  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
/* .image-wrapper img {
  height: 45%;
  margin: 5px;
  max-height: 100%;
  object-fit: contain;
  bottom: 5px;
  position: relative;
} */

.item_stats_green {
  height: 20px;
  width: 100%;
  background-color: #28a745;
  position: absolute;
  bottom: 0px;
  padding-top: 2px;
  padding-left: 2px;
  padding-bottom: 1px;
  pointer-events: none;
}
.item_stats_amber {
  height: 20px;
  width: 100%;
  background-color: #ffc107;
  position: absolute;
  bottom: 0px;
  padding-top: 2px;
  padding-left: 2px;
  padding-bottom: 1px;
  pointer-events: none;
}
.item_stats_red {
  height: 20px;
  width: 100%;
  background-color: #dc3545;
  position: absolute;
  bottom: 0px;
  padding-top: 2px;
  padding-left: 2px;
  padding-bottom: 1px;
  pointer-events: none;
}
.item_counts {
  width: 20px;
  height: 15px;
  background: white;
  float: left;
  margin-right: 1px;
  border: 1px solid lightgrey;
  pointer-events: all;
  font-size: 12px;
  text-align: center;
}
#item_price {
  width: 40px;
  height: 15px;
  float: right !important;
  margin-right: 2px;
  border: 1px solid lightgrey;
  pointer-events: all;
  font-size: 12px;
  text-align: right;
}
.btn-outline-danger {
  margin-right: 5px;
}
.productMenuHidden {
  position: relative;
  width: max-content;
  height: fit-content;
  display: none;
  visibility: hidden;
}
.productMenuVisible {
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  width: 520px;
  height: max-content;
  visibility: visible;
  z-index: 10;
  background: white;
  box-shadow: 5px 5px 10px currentColor;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
}
.productToolbar {
  width: 520px;
  height: 50px;
  position: relative;
  display: flex;
  background: rgb(52 57 87);
  color: white;
  padding: 8px;
  padding-right: 0px;
  margin-bottom: 5px;
}
.productTitle {
  width: 460px;
  height: 36px;
  padding: 5px;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.productClose {
  right: 0px;
}
.productClose:hover {
  color: #f24c5d;
  cursor: pointer;
}
.productClose svg:hover {
  color: #f24c5d;
  cursor: pointer;
}
.productDetail {
  position: relative;
  float: left;
  text-align: left;
  width: 200px;
  text-align: right;
}
.productDetailHidden {
  display: none;
  visibility: hidden;
}
.productDetailValue {
  width: 300px;
  float: left;
  position: relative;
  margin-left: 2px;
  padding: 1px;
}
.productDetailValueHidden {
  display: none;
  visibility: hidden;
}
.changeProduct {
  position: relative;
  width: 100%;
  height: 30px;
  background: #343957;
  float: left;
  text-align: center;
  /* padding: 5px; */
  line-height: 2.6;
  margin-top: 5px;
  font-weight: 500;
  color: white;
}
.changeProduct:hover {
  background-color: rgb(99 125 252);
  cursor: pointer;
}
.submitChanges {
  position: relative;
  position: relative;
  width: 100%;
  height: 30px;
  background: #28a745;
  float: left;
  text-align: center;
  /* padding: 5px; */
  line-height: 2.6;
  font-weight: 500;
  color: white;
}
.submitChanges:hover {
  background-color: #30c352;
  cursor: pointer;
}

/* PRODUCTS STYLES */
.productsContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* margin-left: -50px; */
  width: 520px;
  height: 620px;
  visibility: visible;
  z-index: 10;
  background: white;
  /* pointer-events: none; */
  box-shadow: 5px 5px 10px grey;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
.productsContainerHidden {
  display: none;
  visibility: hidden;
}
.productCategories {
  position: relative;
  width: 100%;
  height: 50px;
  background: #343957;
  color: white;
  box-shadow: 0px 5px 10px grey;
}
.productCategory {
  position: relative;
  width: 100px;
  height: 50px;
  /* padding: 5px; */
  border-right: 1px solid white;
  float: left;
  text-align: center;
  line-height: 3.5;
}
.productCategorySelected {
  background: #637dfc;
}
.productCategory:hover {
  background: #637dfc;
  cursor: pointer;
}
.productSubCategoryHidden {
  display: none;
  visibility: hidden;
}
.searchProducts {
  position: relative;
  top: 14px;
  left: 7%;
  float: left;
}
.productSubCategory {
  position: relative;
  width: 100%;
  height: 30px;
  border-top: 1px solid white;
  background: aliceblue;
  border-bottom: 1px solid;
  box-shadow: 0px 0px 3px;
}
.productSubCategory div {
  position: relative;
  width: 60px;
  height: 28px;
  padding: 5px;
  /* border-right: 1px solid white; */
  float: left;
  text-align: center;
  /* line-height: 1.5; */
  color: white;
}
.hcg_green {
  background: #343957 !important;
  border-right: 1px solid white;
}
.hcg_green:hover {
  background: #28a745 !important;
  cursor: pointer;
}
.hcg_greenSelected {
  background: #28a745 !important;
  border-right: 1px solid white;
}
.hcg_amber {
  background: #343957 !important;
  border-right: 1px solid white;
}
.hcg_amber:hover {
  background: #ffc107 !important;
  cursor: pointer;
}
.hcg_amberSelected {
  background: #ffc107 !important;
  border-right: 1px solid white;
}
.hcg_red {
  background: #343957 !important;
  cursor: pointer;
}
.hcg_red:hover {
  background: #dc3545 !important;
  cursor: pointer;
}
.hcg_redSelected {
  background: #dc3545 !important;
  cursor: pointer;
}
.productList {
  width: 100%;
  height: 548px;
  overflow: scroll;
  margin: 0px;
}
.productListShrunk {
  height: 518px !important;
}
.productLine {
  position: relative;
  width: 100%;
  height: 50px;
  padding: 5px;
  border-top: 1px solid #00000047;
}
.productLineSelected {
  background: #637dfc;
  color: white;
}
.productLineHidden {
  display: none;
}
.productLine:hover {
  background: #637dfc;
  color: white;
  cursor: pointer;
}
.productImage {
  flex: 1 1 0%;
  height: 122%;
  margin: 0px 0.2rem;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  font-weight: 999;
  position: relative;
  float: left;
  pointer-events: none;
}
.productImage img {
  width: 50px;
  height: 85%;
  margin: 10px;
  max-height: 100%;
  object-fit: contain;
  bottom: 5px;
  position: relative;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.productName {
  width: 360px;
  float: left;
  position: relative;
  margin-left: 2px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.favouriteSelect {
  float: right;
  width: 50px;
  height: 50px;
}
.star {
  visibility: hidden;
  font-size: 30px;
  cursor: pointer;
  float: left;
  left: -31px;
}
.star:before {
  content: "\2606";
  position: absolute;
  visibility: visible;
  color: lightgrey;
}
.star:checked:before {
  content: "\2605";
  position: absolute;
  color: #ffc107;
}
.cancelProductMenu {
  width: 100%;
  height: 40px;
  background: #dc3545;
  color: white;
  text-align: center;
  line-height: 2.8;
  box-shadow: 5px 5px 10px grey;
  top: -18px;
  position: relative;
}
.cancelProductMenu:hover {
  background: #dc3545;
  cursor: pointer;
}
.originalProduct {
  position: relative;
  height: 100%;
}
.originalProduct img {
  width: 100px;
  height: 85%;
  margin: 10px;
  max-height: 100%;
  object-fit: contain;
  bottom: 5px;
  position: relative;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

.newProduct {
  position: relative;
  height: 100%;
}
.newProduct img {
  width: 100px;
  height: 85%;
  margin: 10px;
  max-height: 100%;
  object-fit: contain;
  bottom: 5px;
  position: relative;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}
.productImgWrapper {
  padding: 30px;
  width: 80%;
  height: 150px;
  margin: 0px 0.2rem;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  font-weight: 999;
  position: relative;
  pointer-events: none;
  margin: auto;
}
/* When both images are present */
.productImgWrapper:has(.image-wrapper.target) .image-wrapper.original {
  flex: 0 0 50%; /* Don't grow, don't shrink, width 60% */
}

.productImgWrapper:has(.image-wrapper.target) .image-wrapper.target {
  flex: 0 0 50%; /* Don't grow, don't shrink, width 40% */
  opacity: 0.5;
}

.productImgWrapper:has(.image-wrapper.target) .image-wrapper.target img {
  max-width: 50%; /* Target image is smaller */
}
.productDetailsWrapper {
  width: 100%;
  margin-bottom: 10px;
}
.productChangeWrapper {
  width: 100%;
  position: relative;
}
.productChangeWrapperHidden {
  display: none;
  visibility: hidden;
}
.productDetail {
  position: relative;
  width: 50%;
  height: 22px;
  float: left;
  right: 2px;
  margin: 2px;
  display: flex;
  align-items: center;
  justify-content: right;
}
.productValues {
  position: relative;
  width: 200px;
  /* height: 22px; */
  float: left;
  display: inline-flex;
  margin: 2px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.productValuesHidden {
  display: none;
  visibility: hidden;
}
#defaultPrice {
  float: left;
  bottom: -2px;
  position: relative;
}
#defaultPriceButton {
  height: 20px;
  line-height: 0.5;
  font-size: 10px;
  margin-left: 5px;
  margin-top: -4px;
}
.reportedPriceGreen {
  width: fit-content;
  float: left;
  top: 2px;
  position: relative;
  color: #089c56;
}
.reportedPriceAlert {
  width: fit-content;
  float: left;
  top: 2px;
  position: relative;
  color: #dc3545;
}
#reportedPriceButton {
  height: 20px;
  line-height: 0.5;
  font-size: 10px;
  margin-left: 5px;
  margin-top: -2px;
  float: left;
}
.productCheckbox {
  border: 1px solid grey !important;
  position: relative;
  bottom: -2px;
}
.productValues input {
  margin-left: 5px;
  margin-right: 5px;
}
.product_counts {
  width: 20px;
  padding: 2px;
  text-align: center;
  border: 1px solid #80808069;
}
.product_price {
  border: 1px solid #80808069;
  left: -3px;
  position: relative;
  padding: 2px;
}
.changeActionEmpty {
  position: relative;
  display: inline;
  border-radius: 5px;
  background: #089c56;
  color: white;
  margin-top: 2px;
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
.changeActionForced {
  position: relative;
  display: inline;
  border-radius: 5px;
  background: #dc3545;
  color: white;
  margin-top: 2px;
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
.changeActionQueued {
  position: relative;
  display: inline;
  border-radius: 5px;
  background: orange;
  color: white;
  margin-top: 2px;
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
.planogramRowHidden {
  display: none;
  visibility: hidden;
}

.planogram-table tr[draggable="true"] {
  cursor: move;
}

/* .dragging {
  opacity: 0.5;
  background-color: #f0f0f0;
} */
.image-placeholder {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23778899' class='bi bi-card-image' viewBox='0 0 16 16'%3E%3Cpath d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3Cpath d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z'/%3E%3C/svg%3E");
  width: 32px;
  height: 32px;
}
.planogramSettingsContainerHidden {
  display: none !important;
  visibility: hidden;
}
.planogramSettingsContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: fit-content;
  visibility: visible;
  z-index: 10;
  background: white;
  box-shadow: 5px 5px 10px grey;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
}
/* Your main tooltip container styling (from previous answers) */
.item-totals-tooltip {
  --bs-tooltip-bg: white;
  --bs-tooltip-color: #343957;
  --bs-tooltip-max-width: 1000px;
  --bs-tooltip-border-radius: 2px;
  opacity: 1;
  box-shadow: 5px 5px 5px grey;
}

/* Styling for the Bootstrap-generated .tooltip-inner */
.item-totals-tooltip .tooltip-inner {
  width: 100%; /* Ensures this fills the parent tooltip up to its max-width */
  text-align: left;
  font-size: 12px;
  padding: 8px 12px; /* Add internal padding */
  box-sizing: border-box;
}

/* IMPORTANT: Updated CSS for the content wrapper (formerly .salesToolTip, now .sales-tooltip-content) */
.item-totals-tooltip .tooltip-inner .sales-tooltip-content {
  /* REMOVE width: max-content; */
  /* REMOVE height: max-content; (it's often default for block elements) */
  width: 100%; /* Make it fill the .tooltip-inner's width */
  /* background-color: white; - This is already set by --bs-tooltip-bg on the main tooltip */
}

/* CSS for each row within the tooltip */
.item-totals-tooltip .tooltip-inner .tooltip-row {
  position: relative;
  display: block;
}

/* Styles for the label and value spans within the row */
.item-totals-tooltip .tooltip-inner .tooltip-row .tooltip-label {
  flex-grow: 1; /* Allow label to take available space */
  padding-right: 3px; /* Space between label and value */
  white-space: nowrap; /* Prevent label from wrapping if it gets too long, consider overflow-ellipsis */
}

.item-totals-tooltip .tooltip-inner .tooltip-row .tooltip-value {
  flex-shrink: 0; /* Prevents the value from shrinking */
  text-align: right;
  /* Add margin-left if needed for more spacing */
  /* margin-left: auto; */ /* Alternative to push to right, if flex-grow on label isn't enough */
}

/* Your existing sales icon styles */
.salesGreenIcon, .salesRedIcon, .salesAmberIcon {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: bold;
  width: min-content;
  /* border-radius: 50%; */
  /* border: 2px solid rgba(64, 184, 92, 0.534); */
  position: relative;
  line-height: 18px;
  font-family: monospace;
  font-size: small;
  text-align: center;
  font-weight: 900;
  color: white;
}
.salesGreenIcon {
    background-color: #d4edda;
    color: white;
}
.salesRedIcon {
    background-color: #f8d7da;
    color: white;
}
.salesAmberIcon {
  background-color: #fbb907 !important;
    color: white;
}