/* ==========================================================================
   eQMS - Responsywność Twarda (Mobile, Tablet, Desktop)
   ========================================================================== */

/* 1. BLOKADA ROZSADZANIA EKRANU (Krytyczne) */
html, body {
    max-width: 100vw;
    overflow-x: hidden; /* Bezwzględnie blokuje przewijanie całej strony na boki */
}

/* Podstawowe ustawienia płynności */
img, video, canvas, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* Ochrona zamrożonego Logo (nawet jeśli ma twarde 500px w kodzie, na telefonie się skurczy) */
.main-logo, 
.logo-container img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

/* ==========================================
   TABLETY I TELEFONY (ekrany poniżej 992px)
   ========================================== */
@media (max-width: 992px) {
    
    /* Zabezpieczenie zamrożonego Mega-Menu (pozwalamy mu się przewijać palcem w poziomie) */
    .mega-menu, 
    .mega-menu-container, 
    nav {
        display: flex;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        padding-bottom: 10px;
    }

    /* PANCERNE TABELE - Jeśli tabela jest za szeroka, scrolluje się tylko ona, a nie cała strona */
    table, 
    .sys-table {
        display: block !important;
        width: 100vw !important; /* Tabela dostaje szerokość ekranu */
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap; /* Zapobiega łamaniu tekstów w komórkach, ułatwia scrollowanie */
    }

    /* Modale i karty na środku ekranu */
    .modal-content, 
    .sys-modal, 
    .sys-card {
        width: 96% !important;
        margin: 2% auto !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================
   TELEFONY (ekrany poniżej 768px)
   ========================================== */
@media (max-width: 768px) {
    
    /* Pola formularzy - 100% szerokości, jedno pod drugim */
    .form-group, 
    .sys-input, 
    select, 
    textarea, 
    input[type="text"], 
    input[type="email"], 
    input[type="password"], 
    input[type="date"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 15px !important;
    }

    /* Układy kolumnowe (Grid/Flex) zamieniamy na pionowe stosy */
    .row, 
    .sys-grid, 
    .participants-matrix,
    div[style*="display: flex"] {
        display: block !important;
        width: 100% !important;
    }

    /* Przyciski - robimy z nich duże kafle, łatwe do kliknięcia palcem */
    button, 
    .sys-btn, 
    .btn {
        display: block !important;
        width: 100% !important;
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        padding: 15px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Pływające przyciski w tabelach (np. Weryfikuj, Szkolenie) równe do pełnej szerokości */
    td button, 
    td .sys-btn {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    /* Gigantyczny Footer i Social Hub - układamy w wygodny pion */
    .gigantic-footer {
        padding: 30px 15px !important;
        text-align: center !important;
    }

    .social-hub {
        display: block !important; /* Wymuszenie nowej linii */
        width: 100% !important;
        margin-top: 20px !important;
        text-align: center !important;
    }

    .social-hub a, 
    .social-hub icon {
        display: inline-block !important;
        margin: 10px !important;
        padding: 15px !important;
    }
}