/* GLOBAL */

:root {
    --bg-container-login: color-mix(in srgb, #EEFAFF, transparent 10%);

    --border-color-login: #2682A5;

    --bg-btn-login: #89DFFF;


    --ambient-bg-color: #EEFAFF; /* più chiaro */
    --ambient-primary-color: #B4E7FA;
    --ambient-secondary-color: #89DFFF;
    --ambient-tertiary-color: #2682A5; /* più scuro */

    --danger-color: #F46464;
    --h-color: #000;
}

* {
    transition: .3s !important;
}

/* BARRE DI SCORRIMENTO */

html {
    scrollbar-color: var(--ambient-bg-color);
}

/* 2. Regole WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Sfondo della barra (Traccia) */
::-webkit-scrollbar-track {
    background: var(--ambient-bg-color);
    border-radius: 10px;
}

/* La parte trascinabile (Pollice) */
::-webkit-scrollbar-thumb {
    background-color: var(--ambient-tertiary-color);
    border-radius: 10px;
    /* Il bordo dello stesso colore della traccia crea un elegante spazio vuoto laterale */
    border: 3px solid var(--ambient-bg-color);
}

/*LOGO*/

.logo-xl {
    width: 100%;
    max-width: 330px;
}

.logo {
    width: 100%;
    max-width: 200px;

}

/*ICONS*/

.icon-xs {
    width: 10px;
}

.icon-sm {
    width: 30px;
}

.icon-md {
    width: 45px;
}

.container-icon {
    background-color: var(--ambient-tertiary-color);
    color: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    padding: .25rem;
}

.container-icon:hover {
    background-color: var(--ambient-secondary-color);
    color: var(--ambient-tertiary-color);
}

.container-icon:hover svg {
    transform: scale(1.1);
}

/*BTN*/

.btn {
    border-radius: 2rem;
    padding: .25rem 1rem;
    border: 2px solid transparent;
    font-family: 'EncodeSans Bold', sans-serif;
}

/*FONTS*/

.fm-montserrat {
    font-family: "Montserrat", sans-serif;
}

.fm-semibold-montserrat {
    font-family: "Montserrat SemiBold", sans-serif;
}

.fm-bold-montserrat {
    font-family: "Montserrat Bold", sans-serif;
}

.fm-encode {
    font-family: "EncodeSans", sans-serif;
}

.fm-semibold-encode {
    font-family: "EncodeSans SemiBold", sans-serif;
}

.fm-bold-encode {
    font-family: "EncodeSans Bold", sans-serif;
}

/* TITLES */

h1 {
    font-family: "Montserrat Bold", sans-serif;
    color: var(--h-color);
}


/* PAGINA DATI */

.container-menu:has(> .menu-sx.collapsed) + .section-ambient {
    padding-left: 130px !important;
}

.section-ambient {
    min-height: 100vh;
    background-color: var(--ambient-bg-color);
    padding: 2.45rem 20px 1.5rem 260px;
}


/* INPUTS */

.input-text, .input-select {
    background-color: transparent;
    border: 2px solid var(--ambient-tertiary-color) !important;
    padding: .5rem .75rem;
    border-radius: 2rem;
    font-family: "EncodeSans", sans-serif;
}

.input-text {
    min-width: 230px;
}

.input-select {
    min-width: 170px;
}

.input-text:hover, .input-text:focus, .input-select:hover, .input-select:focus {
    box-shadow: 0 0 5px 1px var(--ambient-tertiary-color);
}

.input-text::placeholder {
    color: var(--ambient-tertiary-color);
}

.input-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12'%3E%3Cpath fill='%23333333' transform='rotate(90 8 8)' d='M5.8,14.8l6.1-6.1c.5-.5.5-1.3,0-1.9,0,0,0,0,0,0L5.8.8c-.4-.5-1.2-.6-1.7-.2,0,0,0,0-.1.1l-.2.2c-.4.5-.5,1.1,0,1.5l4.5,4.5c.5.5.5,1.3,0,1.9l-4.5,4.5c-.5.4-.4,1,0,1.5l.2.2c.5.5,1.3.5,1.7,0,0,0,0,0,.1-.1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}


/*LOADER*/

.loader {
    color: var(--ambient-tertiary-color);
    font-size: 20px;
    width: 1em;
    height: 1em;
    border-radius: 50% !important;
    position: relative;
    text-indent: -9999em;
    animation: mulShdSpin 1.3s infinite linear;
    transform: translateZ(0);
}

@keyframes mulShdSpin {
    0%,
    100% {
        box-shadow:
                0 -3em 0 0.2em,
                2em -2em 0 0em,
                3em 0 0 -1em,
                2em 2em 0 -1em,
                0 3em 0 -1em,
                -2em 2em 0 -1em,
                -3em 0 0 -1em,
                -2em -2em 0 0;
    }
    12.5% {
        box-shadow:
                0 -3em 0 0,
                2em -2em 0 0.2em,
                3em 0 0 0,
                2em 2em 0 -1em,
                0 3em 0 -1em,
                -2em 2em 0 -1em,
                -3em 0 0 -1em,
                -2em -2em 0 -1em;
    }
    25% {
        box-shadow:
                0 -3em 0 -0.5em,
                2em -2em 0 0,
                3em 0 0 0.2em,
                2em 2em 0 0,
                0 3em 0 -1em,
                -2em 2em 0 -1em,
                -3em 0 0 -1em,
                -2em -2em 0 -1em;
    }
    37.5% {
        box-shadow:
                0 -3em 0 -1em,
                2em -2em 0 -1em,
                3em 0em 0 0,
                2em 2em 0 0.2em,
                0 3em 0 0em,
                -2em 2em 0 -1em,
                -3em 0em 0 -1em,
                -2em -2em 0 -1em;
    }
    50% {
        box-shadow:
                0 -3em 0 -1em,
                2em -2em 0 -1em,
                3em 0 0 -1em,
                2em 2em 0 0em,
                0 3em 0 0.2em,
                -2em 2em 0 0,
                -3em 0em 0 -1em,
                -2em -2em 0 -1em;
    }
    62.5% {
        box-shadow:
                0 -3em 0 -1em,
                2em -2em 0 -1em,
                3em 0 0 -1em,
                2em 2em 0 -1em,
                0 3em 0 0,
                -2em 2em 0 0.2em,
                -3em 0 0 0,
                -2em -2em 0 -1em;
    }
    75% {
        box-shadow:
                0em -3em 0 -1em,
                2em -2em 0 -1em,
                3em 0em 0 -1em,
                2em 2em 0 -1em,
                0 3em 0 -1em,
                -2em 2em 0 0,
                -3em 0em 0 0.2em,
                -2em -2em 0 0;
    }
    87.5% {
        box-shadow:
                0em -3em 0 0,
                2em -2em 0 -1em,
                3em 0 0 -1em,
                2em 2em 0 -1em,
                0 3em 0 -1em,
                -2em 2em 0 0,
                -3em 0em 0 0,
                -2em -2em 0 0.2em;
    }
}