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

/* Import accessibility styles for WCAG AA compliance */
@import url("/assets/accessibility-b3bcea76.css");

/* Hide scrollbar for filter ribbon */
.filter-ribbon-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-ribbon-scroll::-webkit-scrollbar {
  display: none;
}

/* Ensure dropdown menus are visible and positioned correctly */
[data-dropdown-menu-id] {
  position: absolute !important;
  z-index: 50 !important;
  background: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

[data-dropdown-menu-id].hidden {
  display: none !important;
}

/* Custom prose styling for Trix editor content - admin only, loaded dynamically */

/* Filter Loading States & Animations */
.filter-loading-progress {
  transition: opacity 0.2s ease-in-out;
}

.filter-loading-progress.show {
  opacity: 1;
}

.filter-loading-state {
  animation: pulse 2s infinite;
}

.filter-loading-state.show {
  display: inline-flex !important;
}

/* Loading skeleton animations */
.filter-loading-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Filter ribbon loading state */
.filter-ribbon-loading-state {
  opacity: 0.8;
  pointer-events: none;
}

.filter-ribbon-loading-state .filter-ribbon-scroll {
  overflow: hidden;
}

/* Loading progress bar for filter bar */
.filter-loading-indicator {
  position: relative;
  overflow: hidden;
}

.filter-loading-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Button loading states */
button[disabled] {
  cursor: not-allowed;
  transform: none !important;
}

button[disabled]:hover {
  transform: none !important;
}

/* Spinner animation for loading icons */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Pulse animation for loading elements */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Loading overlay for results */
.filter-results-loading {
  position: relative;
}

.filter-results-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Error state styling */
.filter-error-state {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.filter-error-state .error-icon {
  color: #dc2626;
}

/* Success state for completed filters */
.filter-success-state {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 0.5rem;
  margin: 0.5rem 0;
  color: #166534;
}

/* Optimistic UI state - immediately show selected state */
.filter-optimistic {
  transition: all 0.15s ease-out;
}

.filter-optimistic.selected {
  background-color: #dbeafe !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}

/* Responsive loading states */
@media (max-width: 768px) {
  .filter-loading-state {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
  }
  
  .filter-loading-progress {
    height: 2px;
  }
}

/* Accessibility improvements for loading states */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus states for disabled elements */
button[disabled]:focus {
  outline: none;
  box-shadow: none;
}

/* Loading state for specific filter elements */
[data-filter-loading="true"] {
  opacity: 0.6;
  pointer-events: none;
}

[data-filter-loading="true"] button,
[data-filter-loading="true"] input,
[data-filter-loading="true"] select {
  cursor: wait;
}