/* Progressive Loading Styles - Smart dashboard loading states */

/* Skeleton loading states */
.progressive-loading-state {
    padding: 20px 0;
}

.skeleton-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e1e5e9);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    animation: skeleton-pulse 1.5s ease-in-out infinite alternate;
}

.skeleton-header {
    height: 20px;
    background: var(--skeleton-bg, #f0f0f0);
    border-radius: 4px;
    margin-bottom: 12px;
    width: 60%;
}

.skeleton-content {
    height: 16px;
    background: var(--skeleton-bg, #f0f0f0);
    border-radius: 4px;
    margin-bottom: 8px;
    width: 100%;
}

.skeleton-content:nth-child(2) {
    width: 80%;
}

.skeleton-footer {
    height: 14px;
    background: var(--skeleton-bg, #f0f0f0);
    border-radius: 4px;
    width: 40%;
}

@keyframes skeleton-pulse {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

/* Loading message */
.loading-message {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary, #666);
    font-size: 14px;
}

.loading-message span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.loading-message span::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--primary-color, #007bff);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Trending loading state */
.trending-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-secondary, #666);
    font-size: 14px;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color, #007bff);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Load more button */
.load-more-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
    padding: 12px 24px;
    background: var(--primary-color, #007bff);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-more-btn:hover:not(:disabled) {
    background: var(--primary-hover, #0056b3);
    transform: translateY(-1px);
}

.load-more-btn:disabled {
    background: var(--disabled-bg, #ccc);
    cursor: not-allowed;
    transform: none;
}

/* Error state */
.error-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary, #666);
}

.error-state h3 {
    color: var(--error-color, #dc3545);
    margin-bottom: 12px;
}

.error-state p {
    margin-bottom: 20px;
    font-size: 14px;
}

.retry-btn {
    padding: 10px 20px;
    background: var(--primary-color, #007bff);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.retry-btn:hover {
    background: var(--primary-hover, #0056b3);
}

/* Progressive enhancement indicators */
.news-card[data-enhanced="false"] {
    opacity: 0.9;
}

.news-card[data-enhanced="true"] {
    opacity: 1;
}

.hlc-loading {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid var(--primary-color, #007bff);
    border-top: 1px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .skeleton-card {
        background: var(--card-bg-dark, #2d3748);
        border-color: var(--border-color-dark, #4a5568);
    }
    
    .skeleton-header,
    .skeleton-content,
    .skeleton-footer {
        background: var(--skeleton-bg-dark, #4a5568);
    }
    
    .loading-message,
    .trending-loading,
    .error-state {
        color: var(--text-secondary-dark, #a0aec0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .skeleton-card {
        margin-bottom: 12px;
        padding: 12px;
    }
    
    .loading-message {
        padding: 16px;
        font-size: 13px;
    }
    
    .load-more-btn {
        margin: 16px auto;
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* Performance optimization - reduce animations on slow devices */
@media (prefers-reduced-motion: reduce) {
    .skeleton-card,
    .loading-spinner,
    .hlc-loading {
        animation: none;
    }
    
    .load-more-btn {
        transition: none;
    }
}
/* Skeleton Loading Styles for Instant Dashboard */
.skeleton-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    animation: skeleton-pulse 1.5s ease-in-out infinite alternate;
}

.skeleton-header {
    margin-bottom: 12px;
}

.skeleton-title {
    height: 20px;
    background: var(--skeleton-bg, #f3f4f6);
    border-radius: 4px;
    margin-bottom: 8px;
    width: 80%;
}

.skeleton-meta {
    display: flex;
    gap: 12px;
}

.skeleton-content {
    margin: 12px 0;
}

.skeleton-footer {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.skeleton-text {
    height: 14px;
    background: var(--skeleton-bg, #f3f4f6);
    border-radius: 4px;
    margin-bottom: 6px;
}

.skeleton-text.short {
    width: 60px;
}

.skeleton-text:not(.short) {
    width: 100%;
}

.skeleton-text:last-child {
    width: 75%;
}

/* Trending skeleton */
.trending-skeleton {
    padding: 16px;
}

.skeleton-item {
    height: 40px;
    background: var(--skeleton-bg, #f3f4f6);
    border-radius: 6px;
    margin-bottom: 8px;
    animation: skeleton-pulse 1.5s ease-in-out infinite alternate;
}

/* Skeleton animation */
@keyframes skeleton-pulse {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

/* Dark mode skeleton colors */
[data-theme="dark"] .skeleton-card,
html.dark .skeleton-card {
    background: var(--card-bg, #1f2937);
    border-color: var(--border-color, #374151);
}

[data-theme="dark"] .skeleton-title,
[data-theme="dark"] .skeleton-text,
[data-theme="dark"] .skeleton-item,
html.dark .skeleton-title,
html.dark .skeleton-text,
html.dark .skeleton-item {
    background: var(--skeleton-bg, #374151);
}

/* Smooth transitions when replacing skeletons */
.news-card {
    animation: fade-in 0.3s ease-in-out;
}

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

/* Ensure skeleton cards have proper spacing */
.skeleton-card:last-child {
    margin-bottom: 0;
}

/* Loading state for filter panel */
.filter-panel {
    transition: opacity 0.3s ease;
}

/* Responsive skeleton adjustments */
@media (max-width: 768px) {
    .skeleton-card {
        padding: 12px;
        margin-bottom: 12px;
    }
    
    .skeleton-title {
        height: 18px;
    }
    
    .skeleton-text {
        height: 12px;
    }
}

/* Infinite Scroll Sentinel - Critical for scroll detection */
#scroll-sentinel,
.scroll-sentinel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    margin: 20px 0;
    opacity: 0;
    pointer-events: none;
    /* Ensure it's in the document flow for IntersectionObserver */
    position: relative;
    width: 100%;
}

/* When sentinel is showing loading state */
#scroll-sentinel.loading,
.scroll-sentinel.loading {
    opacity: 1;
}

/* Ensure sentinel is never hidden by overflow */
#news-container-by-token {
    overflow: visible !important;
}

/* Infinite scroll sentinel - ensure it's always visible for IntersectionObserver */
#scroll-sentinel,
.scroll-sentinel {
    display: block !important;
    visibility: visible !important;
    height: 1px;
    min-height: 1px;
    width: 100%;
    pointer-events: none;
    position: relative;
    clear: both;
}


/* Modern Scroll Loading Animations */
.scroll-sentinel {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-sentinel.loading {
  opacity: 1;
  transform: translateY(0);
}

.scroll-loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  gap: 12px;
  animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid transparent;
  border-top: 3px solid var(--accent-color, #667eea);
  border-right: 3px solid var(--accent-color, #667eea);
  border-radius: 50%;
  animation: modernScrollSpin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  filter: drop-shadow(0 0 4px rgba(102, 126, 234, 0.3));
}

.scroll-loading-text {
  color: var(--text-color, #333);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

@keyframes modernScrollSpin {
  0% { 
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% { 
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode scroll loading adjustments */
[data-theme="dark"] .scroll-loading-spinner {
  border-top-color: #667eea;
  border-right-color: #667eea;
  filter: drop-shadow(0 0 6px rgba(102, 126, 234, 0.4));
}

[data-theme="dark"] .scroll-loading-text {
  color: #e5e7eb;
}

/* Light mode scroll loading adjustments */
[data-theme="light"] .scroll-loading-spinner {
  border-top-color: #4f46e5;
  border-right-color: #4f46e5;
  filter: drop-shadow(0 0 3px rgba(79, 70, 229, 0.2));
}

[data-theme="light"] .scroll-loading-text {
  color: #374151;
}

/* Enhanced skeleton animations for filter loading */
.filtering-skeleton {
  padding: 40px 20px;
  animation: fadeInSkeleton 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filtering-skeleton .skeleton-card {
  background: linear-gradient(90deg, var(--card-bg) 25%, var(--hover-bg, rgba(0,0,0,0.05)) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
  height: 200px;
  margin-bottom: 20px;
  border: 1px solid var(--secondary-border-color);
}

.filtering-skeleton .skeleton-card:nth-child(2) {
  animation-delay: 0.2s;
}

.filtering-skeleton .skeleton-card:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes fadeInSkeleton {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Dark mode skeleton adjustments */
[data-theme="dark"] .filtering-skeleton .skeleton-card {
  background: linear-gradient(90deg, rgba(30, 30, 30, 1) 25%, rgba(60, 60, 60, 0.3) 50%, rgba(30, 30, 30, 1) 75%);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Light mode skeleton adjustments */
[data-theme="light"] .filtering-skeleton .skeleton-card {
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 1) 75%);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .scroll-loading-spinner,
  .filtering-skeleton .skeleton-card,
  .scroll-loading-container,
  .filtering-skeleton {
    animation: none;
  }
  
  .scroll-loading-spinner {
    border: 3px solid var(--accent-color);
    border-radius: 50%;
  }
  
  .filtering-skeleton .skeleton-card {
    background: var(--card-bg);
    opacity: 0.7;
  }
}