/* Loading Skeleton Animations - For better perceived performance */

.skeleton {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.03) 0%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.03) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
}

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

/* Skeleton card */
.skeleton-card {
    background: var(--bg-dark-900);
    border: 2px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 12px;
    border-radius: 4px;
}

.skeleton-text-large {
    height: 24px;
    margin-bottom: 16px;
    border-radius: 6px;
}

.skeleton-stat {
    height: 48px;
    border-radius: 8px;
}

.skeleton-chart {
    height: 300px;
    border-radius: 12px;
}

.skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: 8px;
}

/* Dashboard specific skeletons */
.skeleton-week-card {
    min-height: 80px;
    border-radius: 8px;
}

.skeleton-metric {
    height: 80px;
    border-radius: 8px;
}

/* Calendar skeleton */
.skeleton-calendar-day {
    height: 100px;
    border-radius: 8px;
}

/* Smooth content reveal */
.content-loaded {
    animation: fadeIn 0.4s ease-in;
}

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

/* Hide content while loading */
.loading-state .hide-while-loading {
    display: none;
}

/* Show skeleton only during loading */
.skeleton-wrapper {
    display: none;
}

.loading-state .skeleton-wrapper {
    display: block;
}