/* ===== MODAL GRILLE PLEIN ÉCRAN ===== */

/* Modal spécifique pour la grille plein écran */
.modal-grid-fullscreen {
    width: 95vw;
    max-width: 1400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Header avec bannière verte centrée */
.modal-grid-fullscreen-header {
    flex-shrink: 0;
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-grid-fullscreen-header .chord-name-banner {
    margin: 0 auto;
    max-width: fit-content;
}

/* Corps du modal avec scroll */
.modal-body-grid-fullscreen {
    flex: 1;
    overflow-y: auto;
    padding: 0rem;
    background: var(--fond-creme);
}

/* Container de la grille dans le modal */
.modal-body-grid-fullscreen .custom-grid-container {
    margin: 0;
    max-width: 100%;
    background: transparent;
    padding: 0;
}

/* Ajuster la grille pour le plein écran */
.modal-body-grid-fullscreen .custom-grid-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

/* Cartes dans le modal */
.modal-body-grid-fullscreen .diagram-card {
    cursor: default;
}

/* Masquer les boutons de suppression dans le modal */
.modal-body-grid-fullscreen .custom-grid-remove-btn {
    display: none !important;
}

/* Désactiver le drag & drop dans le modal */
.modal-body-grid-fullscreen .chord-card-wrapper {
    pointer-events: none;
}

/* Headers des cartes */
.modal-body-grid-fullscreen .custom-grid-card-header {
    pointer-events: none;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 47.9375rem) {
    .modal-grid-fullscreen {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .modal-body-grid-fullscreen {
        padding: 1rem;
    }
    
    .modal-body-grid-fullscreen .custom-grid-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ========================================
   RESPONSIVE - TABLETTE
   ======================================== */

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    .modal-body-grid-fullscreen .custom-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   PRINT - Optimisation impression
   ======================================== */

@media print {
    .modal-grid-fullscreen .modal-header {
        border-bottom: 2px solid #000;
    }
    
    .modal-body-grid-fullscreen {
        overflow: visible;
    }
    
    .modal-body-grid-fullscreen .custom-grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}