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

/* Price flash animations for real-time Turbo Stream updates */
@keyframes flash-green {
  0%   { background-color: rgba(16, 185, 129, 0.3); }
  100% { background-color: transparent; }
}

@keyframes flash-red {
  0%   { background-color: rgba(244, 63, 94, 0.3); }
  100% { background-color: transparent; }
}

.animate-flash-green {
  animation: flash-green 1.5s ease-out;
}

.animate-flash-red {
  animation: flash-red 1.5s ease-out;
}

/* Pagy pagination styling */
.pagy.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.pagy.nav a,
.pagy.nav [role="link"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pagy.nav a:hover {
  background-color: #f1f5f9;
  color: #005A98;
}

.pagy.nav a[aria-current="page"],
.pagy.nav [role="link"][aria-current="page"] {
  background-color: #005A98;
  color: #ffffff;
  font-weight: 700;
}

.pagy.nav [aria-disabled="true"] {
  color: #cbd5e1;
  pointer-events: none;
}

.pagy.nav .gap {
  color: #94a3b8;
}

/* Skeleton shimmer animation */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-shimmer {
  background-image: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.4) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

:where(.dark, .dark *) .skeleton-shimmer {
  background-image: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.05) 50%, transparent 75%);
}

/* Page transition progress bar */
.progress-bar {
  transition: width 300ms ease, opacity 200ms ease;
}