/* Stile per il selettore di immagini nella pagina admin */

/* Risoluzione problema di sfarfallio delle immagini */
.image-gallery {
    will-change: transform; /* Indica al browser che questo elemento subirà trasformazioni */
    transform: translateZ(0); /* Forza l'accelerazione hardware */
    backface-visibility: hidden; /* Evita il flickering durante le transizioni */
    perspective: 1000; /* Migliora la gestione delle trasformazioni 3D */
    display: flex;
    flex-wrap: wrap;
}

/* Card delle immagini */
.image-card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.375rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000;
    z-index: 1; /* Previene problemi di z-index durante il hover */
}

.image-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Immagini all'interno delle card */
.image-card img {
    object-fit: cover;
    width: 100%;
    height: 100px;
    display: block;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    backface-visibility: hidden; /* Previene flickering */
    transform: translateZ(0); /* Forza accelerazione hardware */
}

/* Corpo delle card */
.image-card .card-body {
    padding: 0.5rem;
}

/* Pulsante seleziona nell'immagine */
.image-card .select-image {
    font-size: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
    transition: background-color 0.2s ease-out, transform 0.1s ease-out;
}

.image-card .select-image:hover {
    transform: translateY(-1px);
}

.image-card .select-image:active {
    transform: translateY(1px);
}

/* Barra di caricamento */
.image-loader {
    padding: 2rem;
    z-index: 5;
}

/* Fix globale per prevenire sfarfallio durante apertura modal */
.modal-open-no-animation * {
    transition: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* Modalità speciale di rendering per prevenire gli sfarfallii */
.image-picker-modal {
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
    transition: none !important;
    -webkit-transition: none !important;
    /* Disabilita l'animazione di Bootstrap */
    -webkit-animation: none !important;
    animation: none !important;
}

/* Previene sfarfallio nei contenuti del modal */
.image-picker-modal .modal-content {
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: hidden !important;
    overflow: hidden !important;
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Stabilizza tutti gli elementi interni al modal */
.image-picker-modal .modal-dialog,
.image-picker-modal .modal-body,
.image-picker-modal .modal-header,
.image-picker-modal .modal-footer {
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: hidden !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Disabilita animazioni di hover che potrebbero causare sfarfallio */
.image-picker-modal .card:hover {
    transform: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: none !important;
}

/* Stile per modalità scura */
body.dark-mode .image-card {
    background-color: #2c2c2c;
    border-color: #333;
}

body.dark-mode .image-card .card-text {
    color: #e0e0e0;
}

/* Animazioni più fluide per dispositivi a basse prestazioni */
@media (prefers-reduced-motion: reduce) {
    .image-card {
        transition: none;
    }
    
    .image-card:hover {
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
}