@import '_content/BlazorStrap.V5/BlazorStrap.V5.bundle.scp.css';
@import '_content/BlazorStrap/BlazorStrap.bundle.scp.css';
@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css';

/* _content/MekaCRM/Pages/Administration/Test.razor.rz.scp.css */
/* Animation Fade-In */
@keyframes fadeIn-b-ntc05orwn1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Animation Slide-In */
@keyframes slideIn-b-ntc05orwn1 {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.directory-button[b-ntc05orwn1] {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligner le contenu à gauche */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 150px; /* Flex-grow: 1, Flex-shrink: 1, Flex-basis: 150px */
    min-width: 150px; /* Largeur minimale pour une meilleure lisibilité */
    max-width: 200px; /* Largeur maximale pour éviter les boutons trop larges */
    padding: 10px; /* Espacement interne */
    border-radius: 5px; /* Bords arrondis */
    transition: flex-basis 0.3s ease, max-width 0.3s ease, box-shadow 0.3s ease; /* Transition pour les propriétés animées */
    animation: fadeIn-b-ntc05orwn1 0.5s ease forwards; /* Animation au chargement */
    box-sizing: border-box; /* Inclure le padding dans la largeur totale */
}
    .directory-button:hover[b-ntc05orwn1] {
        flex-basis: 200px; /* Augmente la flex-basis pour élargir le bouton */
        max-width: 400px; /* Augmente la largeur maximale pour permettre l'expansion */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8); /* Ajoute une ombre portée pour un effet visuel agréable */
    }




/* Animation Slide-In lors de la navigation */
.buttons-container.slide-in .directory-button[b-ntc05orwn1] {
    animation: slideIn-b-ntc05orwn1 0.5s ease forwards;
}

/* Style pour le nom du répertoire */
.directory-name[b-ntc05orwn1] {
    margin-left: 10px;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left; /* Aligner le texte à gauche */
}

/* Styles existants pour btn-outline-primary */
.btn-outline-primary[b-ntc05orwn1] {
    color: #ff5800;
    border-color: #ff5800;
    background-color: transparent; /* Assurez-vous que le fond est transparent */
}
    .btn-outline-primary:hover[b-ntc05orwn1] {
        background-color: #ff5800;
        color: white;
        border-color: #ff5800;
        transform: scale(1.05); /* Légère augmentation de la taille au survol */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8); /* Ombre portée plus douce pour correspondre à l'expansion */
    }

/* Surcharge du pseudo-état :active pour conserver la couleur orange */
.custom-active-button:active[b-ntc05orwn1],
.custom-active-button.active[b-ntc05orwn1],
.custom-active-button:focus[b-ntc05orwn1] {
    background-color: #ff5800 !important;
    color: white !important;
    border-color: #ff5800 !important;
    box-shadow: none !important;
}

/* Container pour les boutons avec Flexbox */
.buttons-container[b-ntc05orwn1] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    animation: fadeIn-b-ntc05orwn1 0.8s ease forwards;
    box-sizing: border-box;
}

    .buttons-container.slide-in[b-ntc05orwn1] {
        opacity: 1;
        transform: translateY(0);
    }

/* Styles pour le spinner de chargement */
.spinner-container[b-ntc05orwn1] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* Ajustez selon vos besoins */
}

/* Ajout d'une classe pour le CardBody personnalisé */
.card-body-custom[b-ntc05orwn1] {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: auto;
}

.text-orange[b-ntc05orwn1] {
    color: #ff5800 !important; /* Couleur orange personnalisée */
}

.alert[b-ntc05orwn1] {
    margin: 10px;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger[b-ntc05orwn1] {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}