/* ====================================================================
   [MODUŁ] ANALIZA TRAWIENIA - ADAPTACJA MOBILNA (max-width: 768px)
   ==================================================================== */

@media (max-width: 768px) {
    /* Główny kontener izolujący moduł na telefonach */
    #kontener-analiza-trawienia {
        width: 100% !important;
        padding: 8px 4px !important;
        box-sizing: border-box;
    }

    /* Dopasowanie filtrów i harmonijek do pełnej szerokości */
    .analiza-filtry-global-wrapper {
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .filtry-daty-grupa {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .filtry-daty-grupa input[type="date"] {
        flex: 1 !important;
        font-size: 13px !important;
        padding: 8px !important;
    }

    /* Zmiana siatki checkboxów na układ 1-kolumnowy na małych ekranach */
    .porownanie-checkboxy-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Optymalizacja wysokości scroll-boxa na słownik bazy danych */
    .gi-scroll-container {
        max-height: 250px !important;
        padding: 6px !important;
    }

    /* --- KLUCZOWA POPRAWKA DLA WYKRESÓW APEXCHARTS --- */
    /* Zamiast ściskać wykres, pozwalamy mu na swobodne oddychanie w poziomie */
    .analiza-karta-glowna {
        width: 100% !important;
        margin-bottom: 16px !important;
        padding: 12px !important;
        box-sizing: border-box;
        overflow-x: auto !important; /* Wymuszenie natywnego przewijania dotykowego */
        -webkit-overflow-scrolling: touch;
        background: #ffffff;
        border: 1px solid var(--kolor-ramki);
        border-radius: var(--promien-karty);
    }

    .analiza-karta-glowna h3 {
        font-size: 13.5px !important;
        margin-top: 0;
        margin-bottom: 12px;
        position: sticky; /* Tytuł zostaje w miejscu podczas przewijania wykresu */
        left: 0;
        display: inline-block;
        max-width: 100%;
    }

    /* Wymuszenie minimalnej szerokości dla kontenerów wykresów.
       Dzięki temu etykiety i bąbelki/kafelki zachowują idealny rozmiar.
    */
    #chart-gi-heatmap {
        width: 900px !important; /* Bezpieczna szerokość dla rozbudowanej osi X */
        height: auto !important;
    }

    #chart-gi-bubble {
        width: 800px !important; /* Gwarancja czytelności rozkładu bąbelków */
        height: 360px !important;
    }

    /* Drobne poprawki wizualne tooltipów oraz etykiet na mobilkach */
    .apexcharts-xaxis-labels, 
    .apexcharts-yaxis-labels {
        font-size: 11px !important;
    }
}