/* Skeleton Loading Styles */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

.skeleton-base {
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton untuk judul event */
.skeleton-title {
    height: 20px;
    width: 80%;
    border-radius: 4px;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton untuk icon */
.skeleton-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton untuk text pendek */
.skeleton-text-short {
    height: 12px;
    width: 60px;
    border-radius: 4px;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton untuk text medium */
.skeleton-text-medium {
    height: 12px;
    width: 100px;
    border-radius: 4px;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton untuk text panjang */
.skeleton-text-long {
    height: 12px;
    width: 200px;
    border-radius: 4px;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton untuk dot separator */
.skeleton-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #A0A4A8;
}

/* Skeleton untuk label */
.skeleton-label {
    height: 20px;
    width: 80px;
    border-radius: 10px;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Skeleton untuk avatar */
.skeleton-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Container untuk skeleton loading */
.mabar-activity-skeleton {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.mabar-activity-skeleton.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .skeleton-text-long {
        width: 150px;
    }
    
    .skeleton-text-medium {
        width: 80px;
    }
    
    .skeleton-title {
        width: 90%;
    }
}

/* Skeleton untuk Aktivitas Tanding */
.skeleton-tanding-date {
    height: 16px;
    width: 120px;
    border-radius: 4px;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-tanding-type {
    height: 16px;
    width: 60px;
    border-radius: 4px;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-team-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-team-name {
    height: 16px;
    width: 150px;
    border-radius: 4px;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-team-score {
    height: 16px;
    width: 30px;
    border-radius: 4px;
    background: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* Container untuk skeleton loading tanding */
.tanding-activity-skeleton {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.tanding-activity-skeleton.hidden {
    opacity: 0;
    pointer-events: none;
}