/* ============================================================
   1. CORE & RESET (Frontend + Backend)
   ============================================================ */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300italic,300,100);
@import url(https://fonts.googleapis.com/css?family=Sevillana);

:root {
    --primary-blue: #0d6efd;
    --sidebar-bg: #ffffff;
}

body {
    background-color: #f8f9fc;
    font-family: 'Lato', sans-serif;
    margin: 0;
    overflow-x: hidden;
}

/* ============================================================
   2. BOOTSTRAP 5 SIDEBAR FIX
   ============================================================ */
.v2-sidebar-menu {
    background-color: var(--sidebar-bg);
    border-right: 1px solid #e3e6f0;
    min-height: 100vh;
    padding: 0 !important;
    z-index: 100;
}

/* Assicura che il contenuto occupi lo spazio corretto */
.v2-page-content {
    background-color: #f8f9fc;
    min-height: 100vh;
    padding: 25px !important;
}

/* Rimuove margini negativi della row che potrebbero causare scroll orizzontale */
.row.g-0 {
    margin-right: 0;
    margin-left: 0;
}

/* ============================================================
   3. STILE DASHBOARD & COMPONENTI (Tua Logica)
   ============================================================ */
.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
}

/* Colori Report */
.index-reports .first  { background: var(--primary-blue) !important; }
.index-reports .second { background: #e74a3b !important; }
.index-reports .third  { background: #1cc88a !important; }
.index-reports .fourth { background: #f6c23e !important; }

/* ============================================================
   4. FRONTEND (Gallery, Slider, Preloader)
   ============================================================ */
.barberss_gallery .single_gallery_item img {
    transition: transform 0.35s ease;
    width: 100%;
}
.barberss_gallery .single_gallery_item:hover img { transform: scale(1.1); }

#EvolutionBarberPreloader { 
    background: #fff; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; 
}

/* Layout Base per la lista */
.nav ul {
    display: flex;
    flex-wrap: wrap; /* Permette agli elementi di andare a capo se necessario */
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 50em) {
    .nav li {
        flex: 0 0 16.666666%; /* 6 elementi per riga */
        text-align: center;
        transition: border .5s;
    }

    .nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 7em; /* Altezza fissa per uniformità */
        text-decoration: none;
    }

    /* Effetto Hover */
    .nav li a:hover, .nav li a:focus {
        border-bottom: 5px solid #a0c3b9;
        background: rgba(0,0,0,0.02);
    }

    /* Icona con animazione Box-Shadow */
    .nav i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(0,0,0,0.05);
        font-size: 24px;
        transition: box-shadow .6s ease-in-out, transform 0.3s;
    }

    .nav a:hover i {
        box-shadow: 0 0 0 15px rgba(0, 65, 91, 0.1);
        transform: scale(1.1);
    }
}

/* Tablet: 2 Colonne (Grid-like) */
@media (min-width: 32.5em) and (max-width: 49.938em) {
    .nav li {
        flex: 0 0 50%; /* 2 elementi per riga */
    }
    
    .nav a {
        flex-direction: row; /* Icona a sinistra, testo a destra */
        padding: 1em;
        justify-content: flex-start;
    }

    .nav .icon {
        margin-right: 15px;
    }
}

/* Mobile: Lista Verticale */
@media (max-width: 32.438em) {
    .nav ul {
        flex-direction: column;
    }
    
    .nav li {
        flex: 0 0 100%;
        border-bottom: 1px solid #eee;
    }
}