/* Custom CSS for the application */

/* Variables */
:root {
    /* Bleu principal */
    --primary: rgb(13, 110, 253);

    /* Bleu survol */
    --primary-hover: rgb(10, 88, 202);

    /* Fond principal, gris très léger */
    --body-bg: #f8f9fa;
}

/* Couleur de fond principale */
body {
    background-color: var(--body-bg);
}

/* Titres des sections */
h2 {
    font-size: 1.2rem;
    margin: 3rem 0 1rem;
}

/* Mettre en bleu toutes les icônes */
.icon-blue {
    color: var(--primary);
    transition: all .2s;

    /* Gestion au survol */
    &:hover:not(.fa-filter, .fa-file-excel) {
        color: var(--primary-hover);
        font-weight: 700;
        transform: scale(110%);
        cursor: pointer;

    }
}

/* Colonnes d'en-tête */
th {
    position: relative;

    .fa-sort {
        position: absolute;
        top: 33%;
        right: 3%;
        transition: all .2s;

        &:hover {
            cursor: pointer;
        }
    }
}

/* En-tête du site */
#header-nav {
    /*background-color: rgba(13, 110, 253, .1);*/
    width: 100%;
    padding: 1rem;

    #logo {
        font-size: 1.5rem;
        p {
            font-size: .8rem;
            font-weight: 700;
        }
    }

    #btn-logout {
        margin-left: 2rem;
    }
}

/* Bouton d'ajout d'un lieu de recharge */
#btn-add-location {
    margin-top: .5rem;
}

/* "Carte" lieu de recharge */
.location-card {
    border: 2px solid black;
    padding: 15px;

    &:first-child {
        margin-bottom: .5rem;
    }

    a {
        width: fit-content;
    }

    .location-card-title {
        width: fit-content;
        margin: 0 auto;

    }

    .location-card-actions {
        margin-left: 3rem;
    }

    .location-card-title, .station-card {
        border: 2px solid rgba(0, 0, 0, .2);
        padding: .5rem;
    }

    /* Borne */
    .station {

        .station-info, .station-card {
            margin: 1rem;
        }

        .station-name {
            font-weight: 500;
        }

        .station-media {
            font-size: 1.5rem;

            i {
                margin: .2rem
            }
        }
    }
}

/* Sur-en-tête tableau réservations passées  */
.booking-action-bar {

    span:first-of-type {

        i {
            font-size: 1.2rem;
        }

        button {
            border: none;
            background-color: transparent;
        }
    }

    .date-selector input {
        margin: .5rem;

    }

    #btn-filter {
        background-color: #FFF;
        border: 2px solid rgba(0, 0, 0, .2);
        padding: .2rem 1.5rem;
        font-weight: 500;
        transition: all .2s;

        &:hover {
            border: 2px solid rgba(0, 0, 0, 0);
            background-color: rgba(0, 0, 0, .2);
            color: #FFF;
        }
    }
}

.table-actions {
    a:last-child {
        margin-left: 1rem;
    }
}

/* Pagination desktop des tableaux */
.table-nav {

    i {
        font-size: 1.2rem;
        font-weight: 700;
    }

    .chevron-single-left,
    .chevron-double-left {
        margin-right: 2rem;

        &:hover {
            cursor: pointer;
        }
    }

    .chevron-single-right,
    .chevron-double-right {
        margin-left: 2rem;

        &:hover {
            cursor: pointer;
        }
    }
}

/* Pagination mobile */
.table-nav-mobile {
    a {
        color: rgba(0, 0, 0, .7);
        transition: all .2s;

        &:hover {
            color: rgba(0, 0, 0, 1);
        }
    }
}

/*
.table-nav {
    position: relative;
    font-weight: 600;

    &::before, &::after {
        font-size: 1.5rem;
        position: absolute;
        top: -15%;
    }

    &::before {
        content: "<<";
        left: 37%;
    }

    &::after {
        content: ">>";
        right: 37%;
    }

    p {
        position: relative;
        font-weight: 500;

        &::before, &::after {
            font-size: 1.5rem;
            position: absolute;
            top: -25%;
        }

        &::before {
            content: "<";
            left: -50%;
        }

        &::after {
            content: ">";
            right: -50%;
        }
    }
}
 */

/* Comportement exclusif desktop */
@media all and (min-width: 768px) {

    #section-locations {order: 1}

    #section-current-bookings {}

    #section-passed-bookings {}

    #section-requested-undone-bookings {order: 2}

    #section-requested-done-bookings {order: 2}

    /* Désactivation pagination mobile en mode desktop */
    .table-nav-mobile {
        display: none!important;
    }

}

/* Comportement exclusif mobile */
@media all and (max-width: 767px) {

    /* Désactivation pagination desktop en mode mobile */
    .table-nav {
        display: none!important;
    }
}