/*
 * 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.
 */

/* AI Success Flash Animation - auto fades green highlight */
@keyframes ai-success-flash {
  0% {
    background-color: rgb(240 253 244); /* bg-green-50 */
    border-color: rgb(34 197 94); /* border-green-500 */
  }
  70% {
    background-color: rgb(240 253 244);
    border-color: rgb(34 197 94);
  }
  100% {
    background-color: white;
    border-color: rgb(209 213 219); /* border-gray-300 */
  }
}

.ai-success-flash {
  animation: ai-success-flash 2s ease-out forwards;
}

/* Toast notification progress bar animation */
@keyframes shrink-x {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.animate-shrink-x {
  animation: shrink-x 5s linear forwards;
}

/* Notification toast animations */
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

/* Milestone celebration modal animation */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-20px);
  }
  50% {
    transform: scale(1.05) translateY(0);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-bounce-in {
  animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* ==========================================================================
   Collapsible Sidebar Styles
   ========================================================================== */

/* Initial state: Handle collapsed sidebar before Stimulus loads (prevents flash) */
@media (min-width: 1024px) {
  /* When sidebar-collapsed is set on html element (initial load from localStorage) */
  html.sidebar-collapsed [data-sidebar-collapse-target="sidebar"] {
    width: 4rem !important; /* w-16 */
  }

  html.sidebar-collapsed [data-sidebar-main] {
    padding-left: 4rem !important; /* pl-16 */
  }

  /* Hide text elements when collapsed */
  html.sidebar-collapsed [data-sidebar-text],
  html.sidebar-collapsed [data-sidebar-hide-collapsed] {
    display: none !important;
  }

  /* Show collapsed-only elements when collapsed */
  html.sidebar-collapsed [data-sidebar-show-collapsed] {
    display: flex !important;
  }

  /* Center sidebar links when collapsed */
  html.sidebar-collapsed [data-sidebar-link] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Hide section headers when collapsed */
  html.sidebar-collapsed [data-sidebar-section-header] {
    display: none !important;
  }

  /* Rotate collapse icon when collapsed */
  html.sidebar-collapsed [data-sidebar-collapse-target="collapseIcon"] {
    transform: rotate(180deg);
  }
}

/* Runtime state: Handle collapsed sidebar via data attribute (after Stimulus loads) */
@media (min-width: 1024px) {
  [data-sidebar-collapse-target="sidebar"][data-collapsed="true"] {
    width: 4rem !important; /* w-16 */
  }

  [data-sidebar-collapse-target="sidebar"][data-collapsed="false"] {
    width: 16rem; /* w-64 */
  }
}

/* Sidebar tooltip styles */
.sidebar-tooltip {
  pointer-events: none;
  z-index: 9999;
}

/* ==========================================================================
   Entri Modal Z-Index Override
   ========================================================================== */
/* Ensure Entri Connect/Sell modals appear above our sticky navbar (z-50 = 50) */
#entriApp,
iframe#entriApp,
[id^="entri"],
.entri-modal,
.entri-backdrop {
  z-index: 10000 !important;
}

/* Entri modal backdrop/overlay needs to cover the navbar */
#entriApp ~ div,
iframe#entriApp ~ div {
  z-index: 9999 !important;
}