/**
 * Skeleton Loader Styles
 *
 * Best practices implemented:
 * - Subtle shimmer animation (slow, gentle)
 * - Reduced-motion support for accessibility
 * - Neutral colors with low contrast
 * - No text labels or loading indicators
 *
 * Reference: docs/redesign/2026-01-12-ui-design-system.md
 */

/* ============================================
   Base Skeleton Styles
   ============================================ */

.skeleton-loader {
    position: relative;
}

/* Hide skeleton when content is loaded - clean, immediate removal */
.skeleton-loader.loaded {
    display: none !important;
}

/* Skeleton card - the placeholder box */
.skeleton-card {
    background: #2a2a2f;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

/* Shimmer animation overlay - subtle and gentle */
.skeleton-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 2.5s ease-in-out infinite;
}

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

/* ============================================
   Reduced Motion Support
   Respects user's motion preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .skeleton-shimmer {
        animation: none;
        background: rgba(255, 255, 255, 0.03);
    }

    .skeleton-text::after {
        animation: none;
        background: rgba(255, 255, 255, 0.03);
    }

    .skeleton-pulse {
        animation: none;
    }
}

/* Centered icon placeholder */
.skeleton-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.08);
    font-size: 2rem;
    z-index: 1;
}

/* Skeleton item spacing */
.skeleton-item {
    padding: 1px;
}

/* ============================================
   Skeleton Text Elements
   ============================================ */

.skeleton-text {
    background: #2a2a2f;
    border-radius: 4px;
    height: 1rem;
    width: 60%;
    position: relative;
    overflow: hidden;
}

.skeleton-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-text-sm { height: 0.75rem; width: 40%; }
.skeleton-text-lg { height: 1.25rem; width: 30%; }

/* ============================================
   Skeleton Header (Date Groups)
   ============================================ */

.skeleton-header {
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

/* ============================================
   Layout Variations
   ============================================ */

/* Grid layout (default) */
.skeleton-layout-grid .skeleton-item {
    /* Uses Bootstrap columns */
}

/* List layout */
.skeleton-layout-list .skeleton-item {
    width: 100%;
    margin-bottom: 1rem;
}

.skeleton-layout-list .skeleton-card {
    display: flex;
    flex-direction: row;
    height: 80px;
}

.skeleton-layout-list .skeleton-card .ratio {
    width: 80px;
    flex-shrink: 0;
}

/* ============================================
   Aspect Ratio Support
   ============================================ */

/* Custom 4:5 ratio (Instagram portrait) - if not defined elsewhere */
.skeleton-loader .ratio-4x5 {
    --bs-aspect-ratio: 125%; /* 5/4 = 1.25 */
}

/* Custom 9:16 ratio (vertical video) */
.skeleton-loader .ratio-9x16 {
    --bs-aspect-ratio: 177.78%; /* 16/9 = 1.778 */
}

/* ============================================
   Animation Variations
   ============================================ */

/* Staggered animation for visual interest */
.skeleton-item:nth-child(1) .skeleton-shimmer { animation-delay: 0s; }
.skeleton-item:nth-child(2) .skeleton-shimmer { animation-delay: 0.1s; }
.skeleton-item:nth-child(3) .skeleton-shimmer { animation-delay: 0.2s; }
.skeleton-item:nth-child(4) .skeleton-shimmer { animation-delay: 0.3s; }
.skeleton-item:nth-child(5) .skeleton-shimmer { animation-delay: 0.4s; }
.skeleton-item:nth-child(6) .skeleton-shimmer { animation-delay: 0.5s; }
.skeleton-item:nth-child(7) .skeleton-shimmer { animation-delay: 0.6s; }
.skeleton-item:nth-child(8) .skeleton-shimmer { animation-delay: 0.7s; }

/* Pulse animation alternative */
.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

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

/* ============================================
   Header Skeleton
   ============================================ */

.header-skeleton {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0 calc(var(--sidebar-width, 250px) + 1rem);
    z-index: 1030;
    background: linear-gradient(180deg, rgba(30, 30, 35, 0.98) 0%, rgba(25, 25, 30, 0.98) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-skeleton.loaded {
    display: none !important;
}

.header-skeleton .skeleton-toggle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #2a2a2f;
    position: relative;
    overflow: hidden;
}

.header-skeleton .skeleton-credits {
    width: 110px;
    height: 36px;
    border-radius: 10px;
    background: #2a2a2f;
    position: relative;
    overflow: hidden;
}

.header-skeleton .skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2a2a2f;
    position: relative;
    overflow: hidden;
}

/* Mobile header skeleton adjustments */
@media (max-width: 991.98px) {
    .header-skeleton {
        padding-left: 1rem;
    }
}

@media (max-width: 767px) {
    .header-skeleton .skeleton-toggle {
        width: 40px;
        height: 40px;
    }

    .header-skeleton .skeleton-credits {
        display: none;
    }
}

/* ============================================
   Sidebar Skeleton
   ============================================ */

.sidebar-skeleton {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    z-index: 1033;
    background: linear-gradient(180deg, rgba(30, 30, 35, 0.98) 0%, rgba(20, 20, 25, 0.99) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-skeleton.loaded {
    display: none !important;
}

.sidebar-skeleton .skeleton-logo-container {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-skeleton .skeleton-logo {
    height: 45px;
    width: 120px;
    background: #2a2a2f;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.sidebar-skeleton .skeleton-nav-section {
    padding: 1rem 0.75rem;
}

.sidebar-skeleton .skeleton-section-label {
    height: 10px;
    width: 70px;
    background: #2a2a2f;
    border-radius: 4px;
    margin: 1rem 0.75rem 0.5rem;
    position: relative;
    overflow: hidden;
}

.sidebar-skeleton .skeleton-section-label:first-child {
    margin-top: 0;
}

.sidebar-skeleton .skeleton-nav-item {
    height: 36px;
    background: #2a2a2f;
    border-radius: 8px;
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
}

.sidebar-skeleton .skeleton-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.625rem 0.75rem;
}

.sidebar-skeleton .skeleton-bottom-card {
    position: absolute;
    bottom: 12px;
    left: 0.75rem;
    right: 0.75rem;
    height: 70px;
    background: #2a2a2f;
    border-radius: 10px;
    overflow: hidden;
}

/* Mobile sidebar skeleton - hidden by default */
@media (max-width: 991.98px) {
    .sidebar-skeleton {
        display: none;
    }
}

/* ============================================
   Content Skeleton
   Simple skeleton for main content area only.
   ============================================ */

.content-skeleton {
    position: relative;
}

.content-skeleton.loaded {
    display: none !important;
}

.content-skeleton .skeleton-date-header {
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

.content-skeleton .skeleton-item {
    padding: 1px;
}

.content-skeleton .skeleton-card {
    background: #2a2a2f;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

/* Content Skeleton - Staggered Animation */
.content-skeleton .skeleton-item:nth-child(1) .skeleton-shimmer { animation-delay: 0s; }
.content-skeleton .skeleton-item:nth-child(2) .skeleton-shimmer { animation-delay: 0.1s; }
.content-skeleton .skeleton-item:nth-child(3) .skeleton-shimmer { animation-delay: 0.2s; }
.content-skeleton .skeleton-item:nth-child(4) .skeleton-shimmer { animation-delay: 0.3s; }
.content-skeleton .skeleton-item:nth-child(5) .skeleton-shimmer { animation-delay: 0.4s; }
.content-skeleton .skeleton-item:nth-child(6) .skeleton-shimmer { animation-delay: 0.5s; }
.content-skeleton .skeleton-item:nth-child(7) .skeleton-shimmer { animation-delay: 0.6s; }
.content-skeleton .skeleton-item:nth-child(8) .skeleton-shimmer { animation-delay: 0.7s; }
.content-skeleton .skeleton-item:nth-child(9) .skeleton-shimmer { animation-delay: 0.8s; }
.content-skeleton .skeleton-item:nth-child(10) .skeleton-shimmer { animation-delay: 0.9s; }