/*login*/
.login-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b3aeae; /* fond gris page */
}

.login-container {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
}

/* Supprimer le fond blanc */
.login-card {
    background: transparent;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
}

.login-logo {
    width: 200px;
    margin: 0 auto auto auto;
    display: block;
}

.input-with-icon {
    position: relative;
}

    .input-with-icon i {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #6c757d;
        font-size: 1.2rem; /* taille explicite */
        width: 20px; /* largeur minimale */
        height: 20px; /* hauteur minimale */
        z-index: 2; /* l’icône passe devant l’input */
        pointer-events: none; /* l’icône ne bloque pas le clic dans le champ */
    }

.login-input {
    background-color: #e0e0e0;
    border: none;
    border-radius: 10px;
    height: 45px;
    padding-left: 40px; /* laisse la place pour l’icône */
    position: relative;
    z-index: 1; /* l’input reste sous l’icône */
}



/* Bouton style */
.login-btn {
    background-color: #6c6c6c; /* gris foncé comme sur ta photo */
    color: #000; /* texte noir */
    border: none;
    border-radius: 10px;
    height: 45px;
}


/*fin login*/

.margin-left-10 {
    margin-left: 10px;
}

margin-right-10{
    margin-right: 10px;
}

.grid-container {
    width: 800px;
    margin: auto;
    /*display: grid;
    grid-template-columns: auto;*/
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 10px
}

@media (max-width: 840px) {
    .grid-container {
        min-width: 95% !important; /* Largeur minimale de 90% sur les mobiles */
        max-width: 100% !important; /* Largeur maximale de 95% sur les mobiles */
    }

    .modal-dialog-custom {
        width: 95% !important;
        max-width: 95% !important;
    }


}

.grid-header {
    display: grid;
    grid-template-columns: 72% 14% 14%;
    font-weight: bold;
}

.grid-header-filtre {
    display: grid;
    grid-template-columns: 72% 14% 14%;
    font-weight: bold;
}

.grid-item {
    display: grid;
    grid-template-columns: 72% 14% 14%;
    padding: 0.25rem 0rem 0.25rem 0rem;
}

.page-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem;
}

.pagination-content {
    display: flex;
    align-items: center;
}

.BackgroundGris {
    background-color: #FFFFFF
}

.BackgroundBlanc {
    background-color: #FFFFFF
}

.BackgroundBlanc:disabled {
    background-color: #EEEEEE;
}

.BackgroundGris:disabled {
    background-color: #EEEEEE;
}


.icon {
    margin-left: 10px;
    cursor: pointer;
}

.icon-recherche {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.icon-filter {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.button-container-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.btn-fixed-width {
    width: 350px;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.input-avec-border {
    border: 1px solid lightgrey;
   
}


.custom-select {
    position: relative;
    width: 100%;
}

.custom-select select {
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="none" stroke="%23343a40" stroke-width=".5" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>') no-repeat right .75rem center/8px 10px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    background-clip: padding-box;
}

.custom-select select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

@media (max-width: 768px) {
    .grid-item-DetailCommande {
        grid-template-columns: 90px 60px 82px auto !important;
    }

    .grid-item-Contact {
        grid-template-columns: auto 88px 42px !important;
    }

    .container-fluid {
        min-width: 100% !important;
        padding-right: 0;
        padding-left: 0;
    }

    .grid-item-Description-large {
        display: none !important;
    }

    .grid-item-Description-small {
        display: block !important;
    }

    .d-none.d-md-block {
        display: none !important;
    }

    .row {
        flex-direction: column;
    }

    .col-12 {
        width: 100%;
    }
}

@media (max-width: 850px) {
    .btn-text {
        display: none !important;
    }

    .btn-icon {
        display: inline-block !important;
    }

    .grid-item-utilisateur {
        grid-template-columns: auto 100px 20px 47px 47px !important;
    }

    .grid-item-representant {
        grid-template-columns: auto 20px 47px 47px !important;
    }
}

@media (min-width: 851px) {
    .btn-text {
        display: inline-block !important;
    }

    .btn-icon {
        display: none !important;
    }

    .grid-item-utilisateur {
        grid-template-columns: auto 20% 7% 11% 20% !important;
    }

    .grid-item-representant {
        grid-template-columns: auto 7% 11% 20% !important;
    }
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

@media (max-width: 768px) {
    nav.vertical-gradient {
        width: 100%;
        margin-top: 0 !important;
    }
}

@media (min-width: 769px) {
    nav.vertical-gradient {
        width: 98%;
        margin-top: 2px!important; 
    }
}

.grid-header-filtre-produit {
    display: grid;
    grid-template-columns: 70% 30%; /* Par défaut */
    gap: 10px;
}

/* Pour les petits écrans */
@media (max-width: 768px) {
    .grid-header-filtre-produit {
        grid-template-columns: 1fr; /* Une seule colonne */
        grid-template-rows: auto auto; /* Deux lignes */
        gap: 15px; /* Espacement entre les éléments */
    }

    .titles-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .titles-container p {
            flex: 1;
            text-align: center;
            margin-right: 5px;
        }

            .titles-container p:last-child {
                margin-right: 0;
            }
}
/* Styles pour les grands écrans */
@media (min-width: 1200px) {
    .grid-container {
        min-width: 100% !important;
        max-width: 100% !important; /* Augmenter la largeur du conteneur */
    }

    .d-xl-none {
        display: none !important;
    }
}

@media (min-width: 1400px) {
    .grid-container {
        min-width: 86% !important;
        max-width: 100% !important; /* Augmenter la largeur du conteneur */
    }

    .d-xl-none {
        display: none !important;
    }
}


@media (min-width: 1600px) {
    .grid-container {
        min-width: 75% !important;
        max-width: 100% !important; /* Augmenter la largeur du conteneur */
    }

    .d-xl-none {
        display: none !important;
    }
}

@media (min-width: 1800px) {
    .grid-container {
        min-width: 67% !important;
        max-width: 1200px !important; /* Augmenter la largeur du conteneur */
    }

    .d-xl-none {
        display: none !important;
    }
}

.custom-img-radius {
    border-radius: 1rem 0 0 1rem;
}

/* Petits écrans : arrondi en bas */
@media (max-width: 767.98px) {
    .custom-img-radius {
        border-radius: 0 0 1rem 1rem;
    }
}