/* ========================================================
   GLOBAL MOBILE RESPONSIVENESS PARA SA LAHAT NG PAGE
   ======================================================== */

@media (max-width: 768px) {
    /* Pinipilit ang body na maging patayo (stacked) ang layout */
    body { 
        flex-direction: column !important; 
    }
    
    /* 1. SIDEBAR: Umaakyat sa itaas bilang Top Navigation Menu */
    aside { 
        width: 100% !important; 
        height: auto !important; 
        position: relative !important; 
        padding: 15px 10px !important; 
        box-sizing: border-box !important;
    }
    
    .brand { 
        margin-bottom: 15px !important; 
        justify-content: center !important; 
    }
    
    nav { 
        display: flex !important; 
        flex-wrap: wrap !important; 
        gap: 5px !important; 
        justify-content: center !important; 
    }
    
    .nav-link { 
        padding: 8px 12px !important; 
        font-size: 0.85rem !important; 
        margin-bottom: 0 !important; 
        flex: 1 !important; 
        min-width: 120px !important; /* Para hindi masyadong mapwersa ang liit */
        text-align: center !important; 
        justify-content: center !important; 
    }
    
    .nav-link[style] { 
        margin-top: 0 !important; /* Inaayos ang log-out link */
    }
    
    /* 2. MAIN CONTENT: Lumalaki para sakupin ang buong screen */
    main { 
        margin-left: 0 !important; 
        width: 100% !important; 
        padding: 15px !important; 
        box-sizing: border-box !important;
    }
    
    .welcome-card, .header-card { 
        padding: 25px 20px !important; 
    }
    
    .welcome-card h1, .header-card h1 { 
        font-size: 1.5rem !important; 
    }
    
    /* 3. GRIDS & FORMS: Ginagawang 1 column lahat ng magkakatabing box */
    .grid-3, .content-grid, .horizontal-form { 
        grid-template-columns: 1fr !important; 
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .form-group-flex {
        width: 100% !important;
    }
    
    /* 4. TABLES & IFRAMES: Nilalagyan ng scrollbar para hindi lumagpas sa screen */
    .card, .settings-card, .table-container { 
        padding: 20px 15px !important; 
        overflow-x: auto !important; /* Nagkakaroon ng swipe left/right kung mahaba ang table */
    }
    
    table { 
        width: 100% !important;
        white-space: nowrap !important; /* Pinipigilan ang magkakapatong na text sa table */
    }
    
    iframe, img {
        max-width: 100% !important;
    }
}