/* ============================================
   SKELETON LOADING SYSTEM - OnAir News
   ============================================ */

.skeleton {
    background: linear-gradient(90deg, var(--skeleton-bg, #f0f0f0) 25%, var(--skeleton-shine, #e8e8e8) 50%, var(--skeleton-bg, #f0f0f0) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

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

/* Homepage Skeletons */
.skeleton-hero {
    width: 100%;
    height: 400px;
    border-radius: 8px;
}

.skeleton-card {
    height: 280px;
    border-radius: 8px;
}

.skeleton-card-sm {
    height: 180px;
    border-radius: 8px;
}

.skeleton-title {
    height: 24px;
    width: 80%;
    margin-bottom: 12px;
}

.skeleton-title-sm {
    height: 18px;
    width: 70%;
    margin-bottom: 8px;
}

.skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-text:nth-child(2) { width: 95%; }
.skeleton-text:nth-child(3) { width: 88%; }
.skeleton-text:nth-child(4) { width: 70%; }

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

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

/* Settings page skeletons */
.skeleton-settings-tab {
    height: 48px;
    width: 140px;
    border-radius: 8px;
}

.skeleton-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.skeleton-form-field {
    height: 44px;
    border-radius: 8px;
}

.skeleton-card-header {
    height: 24px;
    width: 180px;
    margin-bottom: 1rem;
}

/* Hide content when loading */
body.skeleton-loading .skeleton-content {
    visibility: hidden;
    position: absolute;
}

body.skeleton-loading .skeleton-placeholder {
    display: block !important;
}

.skeleton-placeholder {
    display: none;
}

/* Dark mode skeleton */
.mode-dark .skeleton,
.admin-theme-dark .skeleton {
    --skeleton-bg: rgba(255,255,255,0.06);
    --skeleton-shine: rgba(255,255,255,0.12);
}