/* Surcharge des variables de Bootstrap. */

:root {
    --bs-primary-rgb: 72, 43, 216;
    --bs-primary: #482bd8;
    --bs-secondary-rgb: 23, 162, 184;
    --bs-secondary: #17a2b8;
    --bs-light-rgb: 249, 249, 249;
    --bs-light: #f9f9f9;

    /* Palette des indicateurs 5 et 10 classes. */
    --colorscale1: #CE4517;
    --colorscale2: #E55220;
    --colorscale3: #FA7701;
    --colorscale4: #FF8C00;
    --colorscale5: #FFA900;
    --colorscale6: #FFC600;
    --colorscale7: #59C1BF;
    --colorscale8: #3DA3A1;
    --colorscale9: #07928E;
    --colorscale10: #067E7B;

    /* Couleurs fonctionnelles des indicateurs. */
    --missing: #A8A8A7;
    --comparison: #03C4A1;
    --reference: #85849C;

    /* Couleurs fonctionnelles des jauges. */
    --jauge-bar: var(--bs-primary);
    --jauge-bg: #DFDFDF;
    --jauge-limit: #173152;
    --jauge-median: #FF3399;
    --jauge-tick: #727272;
    --jauge-comp: var(--comparison);

    /* Couleurs fonctionnelles de la carte. */
    --map-fill-selected: var(--bs-primary);
    --map-fill-default: #A4CDFE;
    --map-border-selected: #000;
    --map-border-default: #FFFFFF;
    --map-fill-no-data: #e8e8e8;

    /* Couleur background barre. */
    --com-choice: #e8e8e8
}

.bg-com-choice {
    background-color: var(--com-choice) !important;
}

* {
    font-family: "Calibri", sans-serif;
}

/* Surcharge de Dash.*/

#_pages_content {
    height: 100%;
}

div:has(#_pages_content) {
    height: 100%;
}

._dash-loading {
    /* Pour que rien n'apparaisse durant le chargement. */
    margin: auto;
    color: transparent;
    width: 100vw;
    height: 100vh;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

.dash-spinner {
    /*  Remplace le spinner de base. */
    background-image: url("/assets/gifs/67_custom_spinner.gif");
    background-size: contain;
    background-repeat: no-repeat;
}

.dash-spinner * {
    display: none !important;
}

/* Fix divers. */

.daq-thermometer--light__fill {
    /*  Fix thermomètre DAQ : ajout arrondi pour valeur affichée */
    border-radius: 40px 40px 0 0 !important;
}

/* Supprime la flèche UNIQUEMENT pour le menu utilisateur */
.user-dropdown > .dropdown-toggle::after {
    display: none !important;
}

/* Masquer la flèche SVG Dash dans EPCI */
.dash-dropdown-trigger-icon {
    display: none !important;
}

/* Augmenter la taille de la fleche dans MENU*/
#menu-dropdown .dropdown-toggle::after {
    border-top-width: 0.8em;
    border-right-width: 0.4em;
    border-left-width: 0.4em;
    vertical-align: 0.0em;
}

/* Ajouter d'une fleche factive juste pour le VISUEL et qui est stylisable */
.epci-dropdown::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #482bd8;
    pointer-events: none;
    border-top-width: 0.8em !important;
    border-right-width: 0.4em !important;
    border-left-width: 0.4em !important;
}

/* Gestion des accordéons dans le modal sources */
.accordion-button:not(.collapsed) {
    background-color: var(--bs-primary);
    color: white
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-button::after {
    margin-left: 0;
    margin-right: 0.75rem;
    order: -1;
}

/* Gestion de la couleur du bouton pour le modal sources  */
.custom-info-button {
    color: var(--bs-primary) !important;
    transition: transform 0.15s ease;
}

.custom-info-button:hover,
.custom-info-button:active {
    transform: scale(1.08);
}

/* Bouton home stylisé du choix des axes. */

.axis-choice-tabs {

    .nav-link {
        width: 100%;
        color: white;
        text-align: center;

        &.active {
            color: var(--bs-primary);
            background: white;
        }
    }

    .nav-item {
        min-width: 170px;

        &:first-child {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            &::before {
                content: "";
                position: absolute;
                z-index: 0;
                width: 68px;
                height: 68px;
                border-radius: 50%;
            }

            &:has(.nav-link.active)::before {
                background-color: white;
                box-shadow: 0 0 0 5px #8eeaf2;
            }

            &:not(:has(.nav-link.active))::before {
                background-color: var(--bs-primary);
                box-shadow: 0 0 0 5px var(--bs-primary);
            }

            .nav-link {
                position: relative;
                z-index: 2;
                width: 42px;
                height: 42px;
                padding: 0;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                border: 0;
                font-size: 0;

                &::before {
                    font-family: "bootstrap-icons";
                    content: "\F422";
                    font-size: 1.7rem;
                    line-height: 1;
                }

                &::after {
                    content: "";
                    position: absolute;
                    z-index: -1;
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                }

                &.active {
                    background-color: #8eeaf2;

                    &::before {
                        color: white;
                    }

                    &::after {
                        background-color: #8eeaf2;
                    }
                }

                &:not(.active) {
                    background-color: var(--bs-primary);

                    &::before {
                        color: var(--bs-primary);
                    }

                    &::after {
                        background-color: white;
                    }
                }
            }
        }

        &:not(:first-child) {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            &::before {
                content: "";
                position: absolute;
                z-index: 0;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            &:has(.nav-link.active)::before {
                background-color: var(--bs-primary);
            }

            &:not(:has(.nav-link.active))::before {
                background-color: transparent;
            }

            .nav-link {
                position: relative;
                z-index: 2;
                margin-top: 6px;
                margin-bottom: 0;
                padding-bottom: 0.9em;
                border: 0;
                outline: none;
                border-radius: 12px 12px 0 0;

                &.active {
                    background-color: white;
                    color: var(--bs-primary);
                }

                &:not(.active) {
                    background-color: var(--bs-primary);
                    color: white;
                }
            }
        }
    }
}

.graph-choice-tabs {
    .nav-link {
        &.active {
            background: none;
            border-radius: 6px;
            border-color: grey;
        }

        &:not(.active) {
            border: none;
        }
    }
}

.graph-choice-toggle {
    .form-check-input {
        margin-right: 5px;

        &:checked {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }
    }
}

.button_score {
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}

.button_score:hover {
    background-color: #333533 !important;
    color: white !important;
}

.active_score:hover {
    background-color: #333533 !important;
    color: black !important;
    /* le texte reste noir même au hover */
}

/* Gestion Modal Map */
.modal-map-responsive .modal-dialog {
    width: min(75vw, 75vh);
    max-width: none;
}

.modal-map-responsive .modal-content {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.modal-map-responsive .modal-body {
    min-height: 0;
    overflow: hidden;
}

.modal-map-content {
    width: 100%;
    height: 100%;
}

/* Couleurs du texte de ScoresEvolutionAIO */
.scores-evolution {
    color: var(--bs-primary);
}

.scores-evolution [id*='"subcomponent":"score_start_grp"'],
.scores-evolution [id*='"subcomponent":"score_end_grp"'],
.scores-evolution [id*='"subcomponent":"score_evol_grp"'] {
    color: var(--comparison);
}

.scores-evolution [id*='"subcomponent":"score_start_epci"'],
.scores-evolution [id*='"subcomponent":"score_end_epci"'],
.scores-evolution [id*='"subcomponent":"score_evol_epci"'],
.scores-evolution [id*='"subcomponent":"rank_nat_start_epci"'],
.scores-evolution [id*='"subcomponent":"rank_nat_end_epci"'],
.scores-evolution [id*='"subcomponent":"rank_nat_evol_epci"'],
.scores-evolution [id*='"subcomponent":"rank_grp_start_epci"'],
.scores-evolution [id*='"subcomponent":"rank_grp_end_epci"'],
.scores-evolution [id*='"subcomponent":"rank_grp_evol_epci"'] {
    color: var(--reference);
}

/* Bascule de la comparaison groupe / EPCI.
   La racine de ScoresEvolutionAIO et de ScoresThemesEvolAIO porte comp-mode-grp ou
   comp-mode-epci, posé par un clientside callback selon que les stores de
   comparaison sont remplis ou vides.
   La règle n'ajoute que du masquage : elle ne restaure jamais un display, donc elle
   ne peut pas casser le display:flex des dbc.Row affichées. */
.comp-mode-grp .evol-comp-epci,
.comp-mode-epci .evol-comp-grp {
    display: none !important;
}

/* Gestion Map - Pages accueils communes */
.map-responsive {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 767.98px) {
    .map-responsive {
        flex: none;
        aspect-ratio: 1 / 1;
    }
}