/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Animation for new sales */
@keyframes slideInAndHighlight {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes highlightFade {
  0% {
    background-color: rgb(34, 197, 94);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.sale-row-new {
  animation: slideInAndHighlight 0.5s ease-out, highlightFade 2s ease-out 0.5s;
}

/* Hotwire Combobox Overrides - make comboboxes fill their grid cells */
.grid .hw-combobox,
.grid .hw-combobox .hw-combobox__main__wrapper {
  width: 100%;
  max-width: 100%;
}

/* Sidebar states */
.sidebar-collapsed {
  width: 4rem;
  transition: width 0.3s ease-in-out;
}

.sidebar-collapsed [data-sidebar-target="hideOnCollapse"] {
  display: none;
}

.sidebar-expanded {
  width: 16rem;
  transition: width 0.3s ease-in-out;
}

.sidebar-hidden {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease-in-out;
}

@media (max-width: 767px) {
  .sidebar-hidden {
    display: none;
  }

  .sidebar-expanded {
    position: fixed;
    top: 4rem;
    left: 0;
    bottom: 0;
    z-index: 20;
    width: 16rem;
  }
}

/* Shimmer effect for completed sales goals */
.goal-shimmer {
  position: relative;
  overflow: hidden;
}

.goal-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 70%
  );
  animation: goalShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes goalShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Ensure content stays above shimmer */
.goal-shimmer > * {
  position: relative;
  z-index: 2;
}

/* Dark mode shimmer - slightly more subtle */
.dark .goal-shimmer::before {
  background: linear-gradient(
    45deg,
    transparent 35%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 65%
  );
}