/* css/navbar_2026.css */

/* ===============================
   NAVBAR (Liquid Glass Version)
================================ */
.navbar_aquamarine {
    padding: 10px 20px;
    
    /* 1. BASE LIQUID GLASS */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(28, 167, 166, 0.35) 50%, 
        rgba(0, 0, 0, 0.1) 100%
    );
    /* 2. DISTORSIONE E BLUR */
    backdrop-filter: blur(8px) saturate(130%) contrast(110%);
    -webkit-backdrop-filter: blur(18px) saturate(130%) contrast(110%);
    /* 3. TRIDIMENSIONALITÀ INTERNA (Luce e Ombra) */
    box-shadow: 
        /* Ombra Esterna (Destra Basso) */
        0 5px 15px rgba(0, 0, 0, 0.3),
        /* OMBRA INTERNA (Bottom-Right - la profondità) */
        inset -2px -4px 8px rgba(0, 30, 80, 0.3);
    /* 4. BORDO (Il "taglio" del vetro) */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    
    position: sticky;
    top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 100px;
    z-index: 1000;
}

/* --- FIX NAVBAR --- */
/* NAVBAR: Distribuzione a tre colonne */
.navbar_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
}

/* Spazi laterali uguali per centrare il titolo */
.nav-side {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Allinea orizzontalmente il tasto Profilo e il Warning */
.user-status-wrapper {
    display: flex;
    flex-direction: row; /* Elementi uno accanto all'altro */
    align-items: center; /* Centrati verticalmente tra loro */
    gap: 15px;           /* Spazio tra il profilo e il triangolino */
}

.nav-side:last-child {
    justify-content: flex-end; /* Spinge il profilo tutto a destra */
}

.nav-center {
    flex: 2;
    text-align: center;
}

.navbar_content h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--acqua2);
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar_content small {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--sand_light);
}

/* STILE BOTTONI (Sinistra e Destra) */
.buttom_icona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    transition: all 0.3s ease;
    min-width: 60px;
}

.buttom_icona img {
    width: 32px;
    height: 32px;
}

.buttom_icona span, 
.buttom_icona .label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--white) !important;
    text-transform: uppercase;
}

/* HOVER: Solo un leggero feedback visivo */
.buttom_icona:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* ===============================
   PALLINO STATUS (Neon Glass)
================================ */
/* Base neutra: TRASPARENTE per l'effetto Glass */
.dot {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    /* Un bordo sottile bianco per definire il vetro */
    border: 1px solid rgba(255, 255, 255, 0.4); 
    display: block;
    background: rgba(255, 255, 255, 0.1); /* Leggera patina di vetro */
    backdrop-filter: blur(4px); /* Sfoca leggermente lo sfondo dentro il pallino */
    position: relative;
    box-sizing: border-box;
}

/* Stato ONLINE: Bagliore Verde verso l'interno e l'esterno */
.buttom_icona.online .dot {
    background-color: transparent !important; /* Rimuoviamo il pieno */
    /* Bagliore interno (inset) e bagliore esterno fisso */
    box-shadow: inset 0 0 10px rgba(46, 213, 115, 0.8), 
                0 0 5px rgba(46, 213, 115, 0.5);
    border-color: rgba(46, 213, 115, 0.6);
    animation: pulse-green-neon 2s infinite ease-in-out !important;
}

/* Stato OFFLINE: Bagliore Rosso verso l'interno e l'esterno */
.buttom_icona.offline .dot {
    background-color: transparent !important;
    /* Bagliore interno (inset) e bagliore esterno fisso */
    box-shadow: inset 0 0 10px rgba(255, 71, 87, 0.8), 
                0 0 5px rgba(255, 71, 87, 0.5);
    border-color: rgba(255, 71, 87, 0.6);
    animation: pulse-red-neon 2s infinite ease-in-out !important;
}

/* KEYFRAMES PULSAZIONE (Riscritto da zero) */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0px rgba(46, 213, 115, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(46, 213, 115, 0);
    }
    100% {
        box-shadow: 0 0 0 0px rgba(46, 213, 115, 0);
    }
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 71, 87, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 71, 87, 0);
    }
    100% {
        box-shadow: 0 0 0 0px rgba(255, 71, 87, 0);
    }
}



/* WARNING (Glow) */
.nav-warning-blink {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 219, 88, 0.2);
    border: 1px solid rgba(255, 219, 88, 0.6);
    animation: warning-glow 1.5s ease-in-out infinite alternate !important;
}

@keyframes warning-glow {
    from {
        transform: scale(0.9);
        box-shadow: 0 0 2px rgba(255, 219, 88, 0.4);
    }
    to {
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(255, 219, 88, 0.7);
    }
}


/* ===============================
   FOOTER BAR MENU
================================ */
.btm_nav {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 70px;
    
    /* 1. BASE LIQUID GLASS */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(28, 167, 166, 0.35) 50%, 
        rgba(0, 0, 0, 0.1) 100%
    );
    /* 2. DISTORSIONE E BLUR */
    backdrop-filter: blur(8px) saturate(130%) contrast(110%);
    -webkit-backdrop-filter: blur(18px) saturate(130%) contrast(110%);
    /* 3. TRIDIMENSIONALITÀ INTERNA (Luce e Ombra) */
    box-shadow: 
        /* Ombra Esterna (Destra Basso) */
        0 5px 15px rgba(0, 0, 0, 0.3),
        /* OMBRA INTERNA (Bottom-Right - la profondità) */
        inset -2px -4px 8px rgba(0, 30, 80, 0.3);
    /* 4. BORDO (Il "taglio" del vetro) */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 100px;
}

.btm_nav_container {
    display: flex;
    justify-content: center; /* Centra gli elementi orizzontalmente */
    align-items: center;     /* Centra gli elementi verticalmente */
    gap: 40px;               /* Forza la distanza esatta tra i due tasti */
    width: 100%;             /* Prende tutta la larghezza */
    max-width: 500px;        /* Opzionale: evita che su tablet si allontanino troppo */
    margin: 0 auto;          /* Centra il container stesso */
}

.btm_nav_icona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}

.btm_nav_icona img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* STATO NORMALE: Tutte le icone sono bianche e visibili al 100% */
.btm_nav .btm_nav_icona {
    flex: 0 1 auto;
    min-width: 60px;
    transition: all 0.3s ease;
    opacity: 1; /* Bianco pieno e luminoso */
    filter: brightness(1);
}

/* STATO ATTIVO: L'icona della pagina corrente diventa sbiadita */
.btm_nav .btm_nav_icona.active {
    opacity: 0.4; /* Trasparente/Sbiadita */
    pointer-events: none; /* Opzionale: rende il tasto non cliccabile visto che sei già lì */
    transform: none; /* Rimane ferma, non salta */
}

/* HOVER: Solo sulle icone NON attive */
.btm_nav .btm_nav_icona:not(.active):hover {
    transform: translateY(-5px); /* Salta solo se è un'icona cliccabile */
    filter: brightness(1.2); /* Diventa ancora più luminosa al passaggio */
}


/* ===============================
   FOOTER
================================ */
.footer_aquamarine {
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    
    /* 1. BASE LIQUID GLASS */
    background-color: rgba(155, 160, 180, 0.2);
    /* 2. DISTORSIONE E BLUR */
    backdrop-filter: blur(8px) saturate(130%) contrast(110%);
    -webkit-backdrop-filter: blur(18px) saturate(130%) contrast(110%);
    /* 3. TRIDIMENSIONALITÀ INTERNA (Luce e Ombra) */
    box-shadow: 
        /* Ombra Esterna (Destra Basso) */
        0 5px 15px rgba(0, 0, 0, 0.3),
        /* OMBRA INTERNA (Bottom-Right - la profondità) */
        inset -2px -4px 8px rgba(0, 30, 80, 0.3);
    /* 4. BORDO (Il "taglio" del vetro) */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    
    padding: 40px 20px 90px 20px;
    text-align: center;
    margin-top: auto; /* Lo spinge in fondo nel layout flex */
    margin-left: 10px;
    margin-right: 10px;
}

.footer_legal_links a {
    color: var(--acqua6);
    text-decoration: none;
    margin: 0 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

.footer_content h2 {
    color: var(--acqua5);
}

.footer_legal_links a:hover {
    color: var(--evidenziatoreAzzurro); /* Il tuo blu mare */
    text-decoration: underline;
}

.footer_settings a {
    font-size: 0.8rem;
    color: var(--acqua5);
    text-decoration: none;
    transition: color 0.3s;
}

.footer_settings a:hover {
    color: var(--evidenziatoreAzzurro); /* Il tuo blu mare */
    text-decoration: underline;
}

/* ===============================
   RESPONSIVE FOOTER & BTM NAV
================================ */
@media screen and (max-width: 768px) {
    
/* 3. NAVBAR SUPERIORE: Ottimizzazione Spazi */
    .navbar_aquamarine {
        padding: 8px 12px; /* Riduciamo il padding per guadagnare spazio verticale */
    }

    .navbar_content h1 {
        font-size: 1.1rem; /* Titolo più piccolo per evitare che vada su troppe righe */
        line-height: 1.2;
        flex: 2; /* Diamo più spazio al centro */
    }

    .navbar_content h1 small {
        font-size: 0.65rem; /* Sottotitolo minuscolo ed elegante */
        display: block;
        opacity: 0.9;
    }

    /* Riduciamo i pulsanti laterali (Logout e Profilo) */
    .buttom_icona {
        min-width: 45px; /* Più stretti */
        gap: 2px;
    }

    .buttom_icona img {
        width: 24px; /* Icone più piccole (da 32px a 24px) */
        height: 24px;
    }

    .buttom_icona .label {
        font-size: 0.6rem; /* Testo etichette molto piccolo */
    }

    /* Pallino Status e Warning più compatti */
    .dot {
        width: 22px !important;
        height: 22px !important;
    }

    .nav-warning-blink {
        width: 22px;
        height: 22px;
    }

    .nav-warning-blink strong {
        font-size: 10px;
    }

    .user-status-wrapper {
        gap: 8px; /* Avviciniamo Profilo e Warning */
    }
    
    /* 1. BTM NAV: Più compatta e fluttuante */
    .btm_nav {
        bottom: 12px;           /* Distanza dal bordo inferiore dello schermo */
        left: 15px;             /* Margini laterali per l'effetto pillola */
        right: 15px;
        height: 65px;
    }

    .btm_nav_container {
        gap: 25px;              /* Riduciamo lo spazio tra le icone per schermi piccoli */
    }

    .btm_nav_icona {
        font-size: 0.7rem;      /* Testo più piccolo per non affollare */
        min-width: 50px;
    }

    .btm_nav_icona img {
        width: 30px;            /* Icone più bilanciate */
        height: 30px;
    }

    /* 2. FOOTER: Meno invasivo */
    .footer_aquamarine {
        margin: 30px 10px 100px 10px; /* Margini laterali per farlo sembrare un'altra lastra di vetro */
        padding: 10px 5px 85px 5px; /* Spazio in fondo per non sovrapporsi alla btm_nav */
        border-radius: 20px;
    }

    .footer_legal_links a {
        margin: 5px 0;
        font-size: 0.65rem;
    }

    .footer_content h2 {
        font-size: 0.70rem;     /* Copyright più discreto */
    }
}