/**
 * Content Loader Styles
 * Styles pour le module de chargement dynamique de contenu
 * Inclut les animations skeleton, les états du loader et les actions
 */

/* === Conteneur principal === */
[data-content-loader] {
    position: relative;
}

/* === Skeleton Loading === */
.content-loader-skeleton-wrapper {
    display: contents;
}

.skeleton-card,
.skeleton-row {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}

.skeleton-block {
    background: linear-gradient(
        90deg,
        var(--color-gray-200) 25%,
        var(--color-gray-400) 50%,
        var(--color-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-line {
    height: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.skeleton-media {
    height: 200px;
    margin-bottom: var(--spacing-md);
}

/* Skeleton pour badges (états, tags, etc.) */
.skeleton-badge {
    height: 24px;
    width: 80px;
    border-radius: var(--radius-sm);
}

/* Skeleton pour boutons d'action */
.skeleton-button {
    height: 28px;
    width: 70px;
    border-radius: var(--radius-sm);
}

/* Skeleton pour groupe d'actions */
.skeleton-actions {
    display: flex;
    gap: var(--spacing-2xs);
    justify-content: center;
    align-items: center;
}

/* Skeleton pour les cartes */
.skeleton-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.skeleton-card .card-body {
    padding: var(--spacing-md) 0;
}

/* Skeleton pour les lignes de tableau */
.skeleton-row td {
    padding: var(--spacing-sm);
}

.skeleton-row .skeleton-line,
.skeleton-row .skeleton-badge,
.skeleton-row .skeleton-button {
    margin: 0;
}

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

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

/* === Actions (boutons charger plus, retry, etc.) === */
.content-loader-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

/* === États du trigger === */
.content-loader-loading {
    opacity: 0.6;
    cursor: not-allowed;
}

.content-loader-error {
    border-color: var(--color-error);
}

.content-loader-no-more-data {
    opacity: 0.5;
}

.content-loader-hidden {
    display: none !important;
}

/* === Messages d'erreur === */
.content-loader-error-message {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.content-loader-error-message .error-text {
    margin: 0;
    font-weight: var(--font-weight-medium);
}

.content-loader-retry {
    margin-top: var(--spacing-xs);
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    .skeleton-block {
        background: linear-gradient(
            90deg,
            var(--color-gray-600) 25%,
            var(--color-gray-600) 50%,
            var(--color-gray-600) 75%
        );
    }
    
    .skeleton-card {
        background: var(--color-gray-600);
        border-color: var(--color-gray-800);
    }
    
    .content-loader-error-message {
        background-color: var(--color-gray-600);
        color: var(--color-error-bg);
        border-color: var(--color-error-dark);
    }
}

/* === Accessibilité === */
[aria-busy="true"] {
    cursor: wait;
}

/* === Transitions === */
.skeleton-card {
    transition: opacity 0.3s ease-in-out;
}

.content-loader-actions button {
    transition: all 0.2s ease-in-out;
}

.content-loader-actions button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.content-loader-actions button:active:not(:disabled) {
    transform: translateY(0);
}