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

.skeleton-wrapper {
    padding: 15px;
    background: #fff;
    pointer-events: none; /* Prevent hover and interaction on skeleton items */
}

.skeleton-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.skeleton-item {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    margin-bottom: 8px;
    gap: 12px;
}

.skeleton-checkbox,
.skeleton-text,
.skeleton-arrow {
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 936px;
    animation: shimmer 1.5s infinite linear;
    pointer-events: none; /* Ensure no hover interaction */
}

.skeleton-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.skeleton-text {
    flex: 1;
    height: 16px;
}

.skeleton-arrow {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Hide skeleton when content is loaded */
.content-loaded .skeleton-wrapper {
    display: none;
}