/* css/virtual-scroll.css - Styles pour virtual scrolling */

/* Container principal avec scroll */
.virtual-scroll-container {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch; /* Smooth sur iOS */
}

/* Spacers invisibles pour maintenir la hauteur totale */
.virtual-scroll-spacer-top,
.virtual-scroll-spacer-bottom {
    width: 100%;
    pointer-events: none;
    user-select: none;
}

/* Viewport contenant les items visibles */
.virtual-scroll-viewport {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    padding: 0;
}

/* Optimisation GPU pour scroll fluide */
.virtual-scroll-container {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.virtual-scroll-viewport {
    transform: translateZ(0);
    will-change: contents;
}

/* Items dans le viewport */
.virtual-scroll-viewport > * {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Animation d'apparition pour nouveaux items */
.virtual-scroll-viewport > .virtual-item-enter {
    animation: virtualItemEnter 0.2s ease-out;
}

@keyframes virtualItemEnter {
    from {
        opacity: 0;
        transform: translateY(10px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* Performance: Réduire animations si préféré */
@media (prefers-reduced-motion: reduce) {
    .virtual-scroll-viewport > .virtual-item-enter {
        animation: none;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .virtual-scroll-viewport {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .virtual-scroll-viewport {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .virtual-scroll-viewport {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Scrollbar custom pour virtual scroll */
.virtual-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.virtual-scroll-container::-webkit-scrollbar-track {
    background: var(--surface-secondary, #f1f1f1);
    border-radius: 4px;
}

.virtual-scroll-container::-webkit-scrollbar-thumb {
    background: var(--primary-color, #4a6cf7);
    border-radius: 4px;
}

.virtual-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark, #3a5cd7);
}

body.dark-mode .virtual-scroll-container::-webkit-scrollbar-track {
    background: var(--surface-tertiary, #2a2a2a);
}

body.dark-mode .virtual-scroll-container::-webkit-scrollbar-thumb {
    background: var(--primary-color, #4a6cf7);
}

body.dark-mode .virtual-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light, #5a7cff);
}