/*
 * Skeleton Loading Screens
 * Prevents Cumulative Layout Shift by reserving space while content loads
 */

/* Skeleton animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s infinite linear;
    border-radius: 4px;
}

/* Chart skeleton */
.skeleton-chart {
    width: 100%;
    height: 320px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s infinite linear;
    position: relative;
}

.skeleton-chart::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: rgba(0,0,0,0.1);
}

/* Weather card skeleton */
.skeleton-weather-card {
    min-width: 180px;
    height: 180px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
}

.skeleton-weather-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.skeleton-weather-text {
    width: 80%;
    height: 16px;
    border-radius: 4px;
}

.skeleton-weather-temp {
    width: 60%;
    height: 24px;
    border-radius: 4px;
}

/* Card skeleton */
.skeleton-card {
    width: 100%;
    min-height: 150px;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.skeleton-card-header {
    width: 60%;
    height: 24px;
    margin-bottom: 16px;
}

.skeleton-card-content {
    width: 100%;
    height: 80px;
}

/* Best time recommendation skeleton */
.skeleton-best-time {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-time-slot {
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #f8f9fa;
}

.skeleton-time-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
}

.skeleton-time-text {
    flex: 1;
    height: 20px;
    border-radius: 4px;
}

/* Nearby alternatives skeleton */
.skeleton-alternatives {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    overflow: hidden;
}

.skeleton-alternatives-header {
    background: #34a853;
    padding: 16px 20px;
    height: 80px;
}

.skeleton-alternatives-item {
    padding: 14px 16px;
    margin: 12px;
    background: #e8f5e9;
    border-radius: 8px;
    height: 80px;
}

/* Analytics section skeleton */
.skeleton-analytics {
    min-height: 600px;
    border-radius: 8px;
    padding: 24px;
    background: #fff;
    border: 1px solid #0003;
}

.skeleton-analytics-title {
    width: 70%;
    height: 28px;
    margin: 0 auto 24px;
}

.skeleton-analytics-chart {
    width: 100%;
    height: 320px;
    margin: 24px 0;
}

.skeleton-analytics-text {
    width: 100%;
    height: 16px;
    margin-bottom: 12px;
}

/* Loading state utilities */
.loading-container {
    position: relative;
    min-height: 200px;
}

.loading-container.loaded .skeleton {
    display: none;
}

/* Prevent layout shift during loading */
.content-loading {
    visibility: hidden;
    position: absolute;
}

.content-loaded {
    visibility: visible;
    position: relative;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-chart {
        animation: none;
        background: #f0f0f0;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .skeleton-chart {
        height: 260px;
    }

    .skeleton-weather-card {
        min-width: 140px;
        height: 160px;
    }

    .skeleton-analytics {
        min-height: 400px;
        padding: 16px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .skeleton,
    .skeleton-chart {
        background: linear-gradient(90deg, #2a2a2a 0px, #3a3a3a 40px, #2a2a2a 80px);
        background-size: 200px 100%;
    }

    .skeleton-card,
    .skeleton-analytics {
        background: #1a1a1a;
    }

    .skeleton-weather-card,
    .skeleton-time-slot {
        background: #2a2a2a;
    }
}