/* ./css/analiza-max768.css */

@media (max-width: 768px) {
    #analiza-hub-pulpit {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 16px 10px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .panel-porownawczy-uzytkownika .canvas-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        height: 460px !important;
    }



    .modal-zamknij {
        position: static !important;
        display: block !important;
        width: 100%;
        text-align: center;
        margin-bottom: 16px;
        box-sizing: border-box;
    }

    .modal-layout-siatka {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        margin-top: 10px !important;
        height: auto !important;
    }

    .modal-kolumna-wykres {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        background: var(--kolor-tla);
        padding: 8px !important;
        box-sizing: border-box;
    }

    .canvas-wrapper-modal {
        width: 950px !important;
        height: 380px !important;
    }

    .modal-kolumna-statystyki {
        overflow-y: visible !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .analiza-filtry-blok, .analiza-grid-kpi {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .analiza-filtry-blok {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }

    .analiza-filtry-blok input[type="date"],
    .analiza-filtry-blok select {
        width: 100%;
    }

    .analiza-agregacja-pigulki-wrapper {
        margin-left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        gap: 4px;
        padding: 4px;
    }



        #analiza-hub-pulpit {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 16px 10px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .panel-porownawczy-uzytkownika .canvas-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        height: 400px !important;
    }

    /* 🔥 MODAL MOBILNY: Całkowity reset ograniczeń wysokości - okno rośnie wraz z zawartością */
    .analiza-modal-okno {
        width: 94% !important;
        height: auto !important;
        max-height: 92vh !important; /* Bezpieczny margines od krawędzi ekranu smartfona */
        padding: 16px !important;
        overflow-y: auto !important; /* Wymuszenie pionowego scrolla dla całego modalu */
        display: block !important; /* Zamiana z flex na block, aby elementy nie walczyły o wysokość */
    }

    .modal-zamknij {
        position: static !important;
        display: block !important;
        width: 100%;
        text-align: center;
        margin-bottom: 16px;
        box-sizing: border-box;
    }

    /* Układ jedno-kolumnowy: Wykres u góry, statystyki POD SPODEM */
    .modal-layout-siatka {
        display: block !important; /* Wyłączenie Grida na telefonie */
        margin-top: 10px !important;
        height: auto !important;
    }

    /* 🔥 NAPRAWIONE: Kontener wykresu w modalu dostaje stałą wysokość i scroll horyzontalny */
    .modal-kolumna-wykres {
        width: 100% !important;
        height: 320px !important; /* Jawna wysokość, bez niej ApexCharts na telefonie ma 0px */
        display: block !important;
        overflow-x: auto !important; /* Przewijanie wykresu na boki */
        -webkit-overflow-scrolling: touch;
        background: var(--kolor-tla);
        padding: 8px !important;
        box-sizing: border-box;
        margin-bottom: 20px; /* Separacja od bloku statystyk poniżej */
    }

    /* Szerokość nadana bezpośrednio na wrapper wewnątrz przewijanego kontenera */
    .canvas-wrapper-modal {
        width: 850px !important; /* Szerokość optymalna dla czytelnego wykresu na ekranie telefonu */
        height: 290px !important;
    }

    /* Statystyki pod wykresem */
    .modal-kolumna-statystyki {
        overflow-y: visible !important; /* Wyłączenie wewnętrznego scrolla, przewija się cały modal */
        padding-right: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    .analiza-filtry-blok, .analiza-grid-kpi {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
        #analiza-hub-pulpit {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 16px 10px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .panel-porownawczy-uzytkownika .canvas-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        height: 400px !important;
    }

    .analiza-modal-okno {
        width: 94% !important;
        height: auto !important;
        max-height: 92vh !important;
        padding: 16px !important;
        overflow-y: auto !important;
        display: block !important;
    }

    .modal-zamknij {
        position: static !important;
        display: block !important;
        width: 100%;
        text-align: center;
        margin-bottom: 16px;
        box-sizing: border-box;
    }

    .modal-layout-siatka {
        display: block !important;
        margin-top: 10px !important;
        height: auto !important;
    }

    .modal-kolumna-wykres {
        width: 100% !important;
        height: 320px !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        background: var(--kolor-tla);
        padding: 8px !important;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

    .canvas-wrapper-modal {
        width: 850px !important;
        height: 290px !important;
    }

    .modal-kolumna-statystyki {
        overflow-y: visible !important;
        padding-right: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    .analiza-filtry-blok, .analiza-grid-kpi {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
        .panel-matrycy-korelacji {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #apexMacierzKorelacjiParametrow {
        width: 600px !important; /* Komfortowa, stała szerokość mobilna chroniąca etykiety */
    }
        .analiza-agregacja-pigulki-wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        box-sizing: border-box;
    }
    
    .pigulka-agregacji-btn {
        padding: 8px 6px;
        font-size: 12px;
    }


    /* Fix wychodzenia bloku wyboru biomarkerów i pór dnia poza ekran */
    .porownanie-checkboxy-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 10px !important;
    }

    .analiza-slownik-kombinowany-blok {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }

    /* Dopasowanie szerokości karty wyboru na urządzeniach mobilnych */
    #panel-wyboru-parametrow-wrapper,
    .panel-wyboru-parametrow {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}