/* Import FontAwesome pour s'assurer que les icônes sont disponibles */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Responsive Layout Optimizations */
/* Utilisation maximale de la largeur avec petites marges */

/* Conteneurs principaux */
.responsive-container {
    width: 100%;
    max-width: none;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* Optimisation des cartes et listes */
.responsive-card {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.responsive-list {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Optimisation des tableaux */
.responsive-table {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.responsive-table .table-responsive {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Optimisation pour différentes tailles d'écran */

/* Très grands écrans (1400px et plus) */
@media (min-width: 1400px) {
    .responsive-container {
        padding-left: 25px;
        padding-right: 25px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Optimisation pour les restrictions d'épreuves sur grands écrans */
    .restrictions-card {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Limiter la largeur des listes et alertes */
    .responsive-list, .responsive-alert {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Optimisation des titres de compétitions sur grands écrans */
    .title-col {
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        max-width: 60% !important;
        min-width: 300px !important;
        width: auto !important;
    }

    /* Forcer le conteneur flex à ne pas étendre les éléments */
    .d-flex.justify-content-between {
        justify-content: flex-start !important;
        gap: 20px !important;
    }

    /* Optimisation du contenu des cartes sur grands écrans */
    .responsive-card .card-body {
        padding: 25px 40px;
    }

    /* Optimisation de la colonne de date sur grands écrans */
    .date-col {
        flex-basis: 200px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        min-width: 150px !important;
        width: 200px !important;
        margin-left: auto !important;
    }

    /* Règle spécifique pour les éléments de liste des compétitions */
    .list-group-item .d-flex.justify-content-between {
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .list-group-item .title-col {
        flex: 0 1 auto !important;
        max-width: 60% !important;
        width: auto !important;
    }
}

/* Grands écrans (1200px à 1399px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .responsive-container {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Optimisation pour les restrictions d'épreuves sur grands écrans */
    .restrictions-card {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Limiter la largeur des listes et alertes */
    .responsive-list, .responsive-alert {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Optimisation des titres de compétitions sur grands écrans */
    .title-col {
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        max-width: 65% !important;
        min-width: 300px !important;
        width: auto !important;
    }

    /* Forcer le conteneur flex à ne pas étendre les éléments */
    .d-flex.justify-content-between {
        justify-content: flex-start !important;
        gap: 18px !important;
    }

    /* Optimisation du contenu des cartes sur grands écrans */
    .responsive-card .card-body {
        padding: 20px 30px;
    }

    /* Optimisation de la colonne de date sur grands écrans */
    .date-col {
        flex-basis: 180px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        min-width: 140px !important;
        width: 180px !important;
        margin-left: auto !important;
    }

    /* Règle spécifique pour les éléments de liste des compétitions */
    .list-group-item .d-flex.justify-content-between {
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 18px !important;
    }

    .list-group-item .title-col {
        flex: 0 1 auto !important;
        max-width: 65% !important;
        width: auto !important;
    }
}

/* Écrans moyens (992px à 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .responsive-container {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Optimisation pour les restrictions d'épreuves sur écrans moyens */
    .restrictions-card {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Limiter la largeur des listes et alertes */
    .responsive-list, .responsive-alert {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Optimisation des titres de compétitions sur écrans moyens */
    .title-col {
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        max-width: 70% !important;
        min-width: 280px !important;
        width: auto !important;
    }

    /* Forcer le conteneur flex à ne pas étendre les éléments */
    .d-flex.justify-content-between {
        justify-content: flex-start !important;
        gap: 15px !important;
    }
}

/* Tablettes (768px à 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .responsive-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .responsive-table .table-responsive {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Mobiles (576px à 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .responsive-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .responsive-table .table-responsive {
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Très petits mobiles (moins de 576px) */
@media (max-width: 575.98px) {
    .responsive-container {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .responsive-table .table-responsive {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Optimisations spécifiques pour les éléments de contenu */
.responsive-content {
    width: 100%;
    max-width: none;
}

/* Règles globales pour optimiser l'affichage des listes de compétitions */
.list-group-item .d-flex.w-100.justify-content-between.align-items-center {
    justify-content: flex-start !important;
    gap: 15px !important;
}

.list-group-item .title-col {
    flex: 0 1 auto !important;
    max-width: 70% !important;
    width: auto !important;
}

.list-group-item .date-col {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    text-align: right !important;
}

/* Règles globales pour limiter la largeur sur tous les écrans larges */
@media (min-width: 992px) {
    /* Conteneurs principaux */
    .responsive-container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Listes et alertes */
    .responsive-list, .responsive-alert, .list-group {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Cartes */
    .responsive-card {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Forcer la largeur limitée pour tous les éléments principaux */
    .alert.responsive-alert {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .list-group.responsive-list {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Optimiser spécifiquement les titres dans les éléments de liste */
    .list-group-item .d-flex {
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .list-group-item .title-col {
        flex: 0 1 auto !important;
        max-width: 60% !important;
        width: auto !important;
        white-space: normal !important;
    }

    .list-group-item .date-col {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        text-align: right !important;
        white-space: nowrap !important;
    }
}

.responsive-content .card-body {
    padding: 15px;
}

.responsive-content .list-group-item {
    padding: 12px 15px;
}

/* Optimisation des boutons sur mobile */
@media (max-width: 767.98px) {
    .btn-group-responsive .btn {
        margin-bottom: 5px;
        width: 100%;
    }
    
    .btn-group-responsive {
        display: flex;
        flex-direction: column;
    }
}

/* Optimisation des formulaires */
.responsive-form {
    width: 100%;
    max-width: none;
}

.responsive-form .form-group,
.responsive-form .mb-3 {
    margin-bottom: 1rem;
}

/* Optimisation des alertes */
.responsive-alert {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* Optimisation des modales */
@media (min-width: 576px) {
    .modal-dialog-responsive {
        max-width: calc(100vw - 30px);
        margin: 15px auto;
    }
}

@media (min-width: 992px) {
    .modal-dialog-responsive {
        max-width: 800px;
    }
}