/* ===============================================
   MOBILE BOTTOM NAVIGATION - FINAL VERSION
   Questo file viene caricato per ultimo e sovrascrive tutto
   =============================================== */

@media (max-width: 1199.98px) {
    /* Fix per iOS PWA - Previeni overflow e bounce effect */
    html, body {
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
    }
    
    /* Barra di navigazione - Stile semplice iOS nativo */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        
        /* Fix iOS PWA - Forza accelerazione hardware */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        
        /* Sfondo bianco pulito */
        background: white !important;
        background-color: white !important;
        background-image: none !important;
        
        /* Bordo superiore */
        border-top: 1px solid #e0e0e0 !important;
        border-radius: 0 !important;
        
        /* Layout */
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        
        /* Spaziatura */
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 65px !important;
        height: auto !important;
        
        /* Ombra leggera */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important;
        -webkit-box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important;
        
        /* Rimuovi qualsiasi effetto glassmorphism */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Voci del menu */
    .mobile-nav-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Testo scuro */
        color: #333 !important;
        
        /* Rimuovi stili */
        text-decoration: none !important;
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        
        /* Spaziatura */
        padding: 6px 8px !important;
        gap: 2px !important;
        
        /* Transizione */
        transition: all 0.2s ease !important;
        
        /* Cursore */
        cursor: pointer !important;
    }

    /* Icone */
    .mobile-nav-item i {
        font-size: 24px !important;
        margin-bottom: 2px !important;
        color: #333 !important;
        transition: all 0.2s ease !important;
        display: block !important;
        line-height: 1 !important;
    }

    /* Testo sotto le icone */
    .mobile-nav-item span {
        font-size: 10px !important;
        font-weight: 500 !important;
        color: #333 !important;
        transition: all 0.2s ease !important;
        display: block !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }

    /* Stato attivo */
    .mobile-nav-item.active {
        color: #007aff !important;
    }

    .mobile-nav-item.active i {
        color: #007aff !important;
        transform: scale(1.05) !important;
    }

    .mobile-nav-item.active span {
        color: #007aff !important;
    }

    /* Feedback al tap */
    .mobile-nav-item:active {
        opacity: 0.6 !important;
    }

    /* Rimuovi qualsiasi overlay o gradient */
    .mobile-nav-item::before,
    .mobile-nav-item::after {
        display: none !important;
    }
    
    /* Fix iOS PWA - Assicura padding-bottom su tutti i container principali */
    .content-container,
    .container-fluid,
    main,
    main > .container,
    main > .container-fluid,
    [class*="dipendente-content"],
    [class*="responsabile-content"],
    [class*="hr-content"],
    [class*="superuser-content"] {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* Fix specifico per iOS standalone (PWA) */
    @supports (-webkit-touch-callout: none) {
        .content-container,
        .container-fluid,
        main,
        main > .container,
        main > .container-fluid {
            padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }
}

/* ===============================================
   FIX PER MODAL (GLOBALE - Mobile + Desktop)
   ===============================================
   
   Problema risolto:
   - Modal apparivano opachi/grigi a causa degli effetti glassmorphism
   - Backdrop intercettava i click impedendo l'interazione
   - Scroll della pagina non bloccato quando modal aperto
   
   Soluzione:
   - Z-index gerarchico: backdrop(1040) < modal(1050) < dialog(1051) < content(1052)
   - pointer-events: backdrop(none), modal(auto) per permettere click
   - Rimozione selettiva effetti glassmorphism dalle classi iOS
   - Scroll bloccato con overflow:hidden (default Bootstrap)
   
   =============================================== */

/* BLOCCA SCROLL DEL BODY quando modal è aperto - usa solo overflow */
body.modal-open {
    overflow: hidden !important;
}

/* Backdrop - TRASPARENTE (nessuno sfondo grigio) */
.modal-backdrop {
    background-color: transparent !important;
    opacity: 0 !important;
    z-index: 1040 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
}

/* Modal - posizionato SOTTO la navbar */
.modal {
    z-index: 1050 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
    padding-top: 80px !important; /* Spazio per la navbar */
}

/* Modal dialog - centrato verticalmente ma sotto la navbar */
.modal-dialog {
    z-index: 1051 !important;
    position: relative !important;
    margin: 1rem auto !important;
    max-width: 500px !important;
}

/* Dimensioni specifiche per mobile */
@media (max-width: 1199.98px) {
    .modal-dialog {
        max-width: 90% !important;
    }
}

/* Modal content bianco e pulito */
.modal-content {
    background-color: #ffffff !important;
    opacity: 1 !important;
    z-index: 1052 !important;
    position: relative !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    pointer-events: auto !important;
}

.modal-body {
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Max-height solo su mobile */
@media (max-width: 1199.98px) {
    .modal-body {
        max-height: 60vh !important;
    }
}

/* Rimuovi effetti glassmorphism da TUTTI gli elementi nel modal */
.modal-body .ios-glass-card,
.modal-body .ios-stat-card,
.modal-body .ios-icon-circle,
.modal-body .card,
.modal-body .gd3d-card,
.modal-body .card-body,
.modal-body .card-header,
.modal-body .card-footer,
.modal-body div,
.modal-body .row,
.modal-body .col,
.modal-body [class*="col-"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Form controls bianchi */
.modal-body .form-control,
.modal-body .form-select,
.modal-body input,
.modal-body select,
.modal-body textarea {
    background-color: #ffffff !important;
    opacity: 1 !important;
}

/* Label e testo visibili */
.modal-body label,
.modal-body .form-label {
    color: #212529 !important;
    opacity: 1 !important;
}

/* Tabelle bianche */
.modal-body .table {
    background-color: #ffffff !important;
}

.modal-body .table > :not(caption) > * > * {
    background-color: transparent !important;
}

.modal-header {
    background-color: #0d6efd !important;
    opacity: 1 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.modal-footer {
    background-color: #ffffff !important;
    opacity: 1 !important;
    border-top: 1px solid #dee2e6 !important;
}

/* Nascondi "Salta al contenuto principale" - link accessibilità */
.skip-link {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Nascondi su desktop */
@media (min-width: 1200px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}