/* 
   Nom du fichier : styles.css 
   Description : Feuille de style pour le site web STUDIO BS | Alexandre Boni.
   Auteur : Alexandre Boni 
   Date de création : 19.09.2023 
*/

/***********************************
    VARIABLES
***********************************/

:root {
    --bleu-studiobs-clair: #9ec542;
    --bleu-studiobs-fonce: #084734;

}

/***********************************
    STYLES DE BASE
***********************************/

html, body {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
}

.badge {
    font-size: 2em;
    font-weight: 400;
    min-width: 80px;
}

.badge a {
    text-decoration: none;
    color: inherit;
}

.dt-center {
    vertical-align: middle !important; /* Aligne verticalement au centre */
}

.menu-standard {
    color: #2ebcfe;
}

.menu-vegetarien {
    color: #00ce00;
}

.menu-du-chef {
    color: #ff0026;
}

.menu-autre {
    color: #9e00cd;
}

.password-mask {
    filter: blur(5px);
    transition: filter 0.3s ease;
    cursor: pointer;
}

.password-mask:hover {
    filter: none;
}

.accordion-button:focus {
    outline: none;
    box-shadow: none;
}

/***********************************
    SIDEBAR
***********************************/

#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -15rem;
    transition: margin 0.25s ease-out;
    background-color: var(--bleu-studiobs-fonce);
}

#sidebar-wrapper .accordion {
    width: 15rem;
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
}

#page-content-wrapper {
    min-width: 100vw;
}

body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
    margin-left: 0;
    background-color: var(--bleu-studiobs-fonce);
}

.accordion-button, .list-group-item {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
}

#sidebar-wrapper .list-group {
    width: 100%;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
        margin-left: -15rem;
    }
}

button.accordion-button:not(.collapsed) {
    background-color: var(--bleu-studiobs-clair);
    color: #FFFFFF;
}

button.accordion-button {
    background-color: var(--bleu-studiobs-fonce);
    color: #FFFFFF;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    box-shadow: none;
    border-color: inherit;
}

.form-control:focus {
     box-shadow: none !important;
     border-color: #ced4da !important; /* facultatif : couleur par défaut */
 }

 /***********************************
    COMPOSANTS
***********************************/

/* Largeur fixe pour .input-group-text, adaptée aux icônes Font Awesome */
.input-group-text {
    width: 3rem;
    justify-content: center;
    display: flex;
    align-items: center;
}

/* Bouton formulaires */
button, .btn {
    font-family: 'Roboto', sans-serif;
}

.btn-form {
    background-color: var(--bleu-studiobs-clair);
    color: #ffffff; /* couleur du texte */
    border-color: var(--bleu-studiobs-clair); /* couleur de la bordure */
    transition: 0.8s;
}

/* Pour le hover, focus, et active states */
.btn-form:hover,
.btn-form:focus,
.btn-form:active {
    background-color: var(--bleu-studiobs-fonce);
    border-color: var(--bleu-studiobs-fonce);
}

/* Bouton Toggle */
body .btn-toggle {
    background-color: #FFFFFF;
    color: #333333; /* couleur du texte */
    border-color: #FFFFFF; /* couleur de la bordure */
    transition: 1s;
}

/* Pour le hover, focus, et active states */
.btn-toggle:hover,
.btn-toggle:focus,
.btn-toggle:active {
    background-color: #FFFFFF;
    color: #333333; /* couleur du texte */
    border-color: #FFFFFF; /* couleur de la bordure */
}

.btn-toggle:hover i {
    transform: rotate(180deg);
    transition: transform 0.5s ease-in-out;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bleu-studiobs-fonce);
    --bs-tooltip-color: var(--bs-white);
}

.form-control.custom-textarea-page {
    height: 200px;
}

li.paginate_button.page-item.active a.page-link {
    color: #FFFFFF !important;
    background-color: var(--bleu-studiobs-fonce) !important;
    border: 0px;
}

/* Pour personnaliser la couleur de texte et le fond du bouton actif lors du survol */
li.paginate_button.page-item.active a.page-link:hover {
    color: #FFFFFF !important; /* Par exemple, noir */
    background-color: var(--bleu-studiobs-clair) !important; /* Par exemple, vert */
}

li.paginate_button.page-item.next#example_next a.page-link {
    color: #000000 !important; /* Changer la couleur de texte */
    background-color: #dddddd !important; /* Changer la couleur de fond */
    border: 0px;
}

li.paginate_button.page-item.next#example_next a.page-link:hover {
    color: #FFFFFF !important; /* Changer la couleur de texte */
    background-color: var(--bleu-studiobs-clair) !important; /* Changer la couleur de fond */
    border: 0px;
}

li.paginate_button.page-item.previous#example_previous a.page-link {
    color: #000000 !important; /* Changer la couleur de texte */
    background-color: #dddddd !important; /* Changer la couleur de fond */
    border: 0px;
}

li.paginate_button.page-item.previous#example_previous a.page-link:hover {
    color: #FFFFFF !important; /* Changer la couleur de texte */
    background-color: var(--bleu-studiobs-clair) !important; /* Changer la couleur de fond */
    border: 0px;
}

li.paginate_button.page-item a.page-link {
    color: #000000 !important; /* Pour changer la couleur de texte */
    background-color: #dddddd !important; /* Pour changer la couleur de fond */
    border: 0px;
}

li.paginate_button.page-item a.page-link:hover {
    color: #FFFFFF !important; /* Pour changer la couleur de texte */
    background-color: var(--bleu-studiobs-clair) !important;
    border: 0px;
}

.form-check-input:checked {
    background-color: var(--bleu-studiobs-clair);
    border-color: var(--bleu-studiobs-clair);
}


/***********************************
    STYLES DE TEXTE PERSONNALISES
***********************************/

/* Liens dans le menu actif */
a.list-group-item.active.custom-list-bg-active {
    background-color: var(--bleu-studiobs-clair);
    border-color: var(--bleu-studiobs-clair);
}

.custom-link-text {
    color: var(--bleu-studiobs-clair);
    text-decoration: none;
    transition: 0.8s;
}

.custom-link-text:hover, .custom-link-text:focus {
    text-decoration: underline;
    color: var(--bleu-studiobs-fonce);
}

.custom-thumbnail {
    /* Définissez la largeur et la hauteur souhaitées */
    width: 200px;
    height: 200px;

    /* Cette propriété garantit que l'image couvrira complètement l'espace défini */
    object-fit: cover;

    /* Assurez-vous que l'image ne déborde pas de la div, même si cette ligne est techniquement facultative puisque object-fit: cover devrait s'en occuper */
    overflow: hidden;
}

.custom-thumbnail-datatable {
    /* Définissez la largeur et la hauteur souhaitées */
    width: 100px;
    height: 100px;

    /* Cette propriété garantit que l'image couvrira complètement l'espace défini */
    object-fit: cover;

    /* Assurez-vous que l'image ne déborde pas de la div, même si cette ligne est techniquement facultative puisque object-fit: cover devrait s'en occuper */
    overflow: hidden;
}

.draggable-item {
    cursor: move;
}

.draggable-item:hover {
    background-color: var(--bleu-studiobs-clair);
    color: #FFFFFF;
}

.draggable-photos {
    cursor: move;
}

.texte-petit {
    font-size: 0.7rem;
}

.texte-adresse {
    font-size: 0.85rem;
}

/* ACCUEIL */
.reservation {
    border-radius: 20px;
    min-height: 150px;
    color: white;
}

.reservation .total {
    color: #000000;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    font-size: 2rem;
    background: #bbdde1;
    font-weight: 800;
}

.reservation .nombre-reservations,
.reservation button {
    font-size: 2rem;
    font-weight: 400;
    text-decoration: none;
}

.reservation .bloc-reservation {
    color: #FFFFFF;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    font-size: 1.5rem;
}

.reservation .bloc-reservation.menu-standard {
    background: #2ebcfe;
}

.reservation .bloc-reservation.menu-vegetarien {
    background: #00ce00;
}

.reservation .bloc-reservation.menu-du-chef {
    background: #ff0026;
}

.reservation .bloc-reservation.menu-autre {
    background: #9e00cd;
}

.legende {
    color: #FFFFFF;
    width: 150px;
    height: 30px;
    border-radius: 5px;
    font-size: 0.8rem;
}

.legende.menu-standard {
    background: #2ebcfe;
}

.legende.menu-vegetarien {
    background: #00ce00;
}

.legende.menu-du-chef {
    background: #ff0026;
}

.legende.menu-autre {
    background: #9e00cd;
}

.nombre-reservations {
    color: #FFFFFF;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    font-size: 1.5rem;
}

.nombre-reservations.menu-standard {
    background: #2ebcfe;
}

.nombre-reservations.menu-vegetarien {
    background: #00ce00;
}

.nombre-reservations.menu-du-chef {
    background: #ff0026;
}

.nombre-reservations.menu-autre {
    background: #9e00cd;
}

.nombre-reservations.total {
    font-weight: 800;
    color: #000000;
    background: #bbdde1;
}

#qrpreview .video {
    background-color: #000000;
    max-height: 300px;;
}