/* ==========================================================================
   MOBILE.CSS - Precision Responsive Design
   Attivo solo sotto i 768px. Adatta il layout desktop al millimetro.
========================================================================== */

@media (max-width: 768px) {
    
    /* 1. SBLOCCO TOTALE DELLO SCORRIMENTO
       Annulla il blocco "App Desktop" per permettere lo scorrimento naturale col dito */
    html, body, .main-layout, .main-content, .content-area, .centered-dashboard, .report-viewer-root .content-area {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important; /* Niente scroll orizzontali fantasma sulla pagina */
        -webkit-overflow-scrolling: touch;
    }

    /* 2. TOPBAR E MENU DI NAVIGAZIONE
       Mantiene il menu in alto, ma lo spezza su due righe.
       I link diventano una striscia scorrevole orizzontalmente. */
    .topbar {
        height: auto !important;
        padding: 15px 20px !important;
        flex-wrap: wrap !important; /* Permette agli elementi di andare a capo */
        gap: 15px;
    }

    .topbar-left { flex: 1 1 auto; }
    .topbar-right { flex: 0 0 auto; min-width: 0; }
    
    .topbar-nav {
        flex: 1 1 100%; /* Forza il menu sulla seconda riga */
        overflow-x: auto !important; /* Rende i pulsanti scorrevoli col dito */
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        padding-bottom: 5px;
        scrollbar-width: none; /* Nasconde scrollbar su Firefox */
    }
    .topbar-nav::-webkit-scrollbar { display: none; } /* Nasconde scrollbar su Chrome/Safari */
    
    .nav-divider { display: none; } /* Tolto per risparmiare spazio */
    .nav-item { flex-shrink: 0; } /* Impedisce che i testi dei bottoni si schiaccino */

    /* 3. DASHBOARD E CARD (Home)
       Impila le card in una singola colonna con margini perfetti */
    .centered-dashboard { padding: 1.5rem 1rem !important; }
    .hero-title { font-size: 2rem !important; }
    .dashboard-cards-grid { 
        grid-template-columns: 1fr !important; 
        gap: 1rem !important; 
    }
    .feature-card { padding: 1.5rem !important; }

    /* 4. STRUMENTI: RICERCA E BOTTONI
       Mette la barra di ricerca in ordine e impila i bottoni di azione */
    .header-toolbar { flex-direction: column !important; align-items: stretch !important; }
    .search-bar-wrapper { 
        position: relative !important; /* Toglie il centraggio assoluto del desktop */
        left: auto !important; 
        transform: none !important; 
        width: 100% !important; 
        max-width: none !important;
    }
    .header-actions { flex-direction: column !important; width: 100%; gap: 10px; }
    .actions-group { width: 100%; display: flex; gap: 10px; }
    .actions-group button { flex: 1; justify-content: center; } /* Bottoni larghi uguali */

    .premium-upload { padding: 3rem 1.5rem !important; width: 100% !important; }

    /* 5. TABELLE (Il fix più importante)
       Forza la tabella a scorrere orizzontalmente dentro il suo contenitore
       senza sfasare il resto della pagina */
    .premium-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px !important;
        margin-top: 1rem;
    }
    .report-premium-table {
        min-width: 800px !important; /* Forza la tabella a essere larga, attivando lo scroll del contenitore */
        display: table !important; /* Toglie il Flexbox desktop che su mobile comprime le celle */
    }
    .report-premium-table thead { display: table-header-group !important; }
    .report-premium-table tbody { display: table-row-group !important; }
    .report-premium-table tr { display: table-row !important; width: auto !important; }

    /* 6. MODALS E POPUP (Privacy, ecc.)
       Centrati perfettamente, larghi quasi tutto lo schermo */
    .popup-overlay { padding: 15px !important; }
    .popup-card {
        width: 100% !important;
        max-width: none !important;
        margin: auto !important;
        max-height: 90vh !important; /* Evita che escano dallo schermo in alto/basso */
    }
    .popup-body { max-height: calc(90vh - 140px) !important; } /* Gestisce lo scroll interno del popup */

    /* 7. COMPARA COLONNE */
    .comparison-input-grid { 
        grid-template-columns: 1fr !important; 
        height: auto !important; 
    }
    .input-editor-wrapper { min-height: 250px; }

    /* 8. TOAST NOTIFICATIONS
       Centrate in basso per non coprire i menu in alto */
    #toast-container { 
        top: auto !important; 
        bottom: 20px !important; 
        right: 15px !important; 
        left: 15px !important; 
    }
    .toast { width: 100% !important; max-width: none !important; }
}