.image-zoom-hover {
  overflow: hidden;
  /* Ensures the zoomed part stays within the container */
}

.image-zoom-hover img {
  transition: transform 0.3s ease-in-out;
  /* Smooth transition for the zoom effect */
}

.image-zoom-hover:hover img {
  transform: scale(1.1);
  /* Zoom in by 10% on hover */
}

#scrollTopBtn {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 20px;
  /* Place the button at the bottom of the page */
  right: 30px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background-color: #0d6efd;
  /* Set a background color */
  color: white;
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 10px;
  /* Some padding */
  border-radius: 50%;
  /* Circular */
  font-size: 18px;
  /* Increase font size */
}

/* Allocation Grid Placeholders */
.allocation-input::placeholder {
  color: #d1d1d1;
  /* Light grey */
  font-style: italic;
  opacity: 1;
  /* Firefox override */
  font-size: 0.9em;
}

.allocation-input:focus::placeholder {
  color: #e9ecef;
  /* Even lighter on focus */
}

/* TomSelect Dark Mode Support */
[data-bs-theme="dark"] .ts-control {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ts-control input {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-dropdown {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ts-dropdown .option {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-dropdown .active {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper.single .ts-control:after {
  border-color: var(--bs-body-color) transparent transparent transparent;
}