/* =============================================
   PROFESSIONAL MOBILE RESPONSIVENESS (FIXED)
   ============================================= */

/* 1. GLOBAL RESET FOR MOBILE */
@media (max-width: 900px) {
    * { box-sizing: border-box; }
    
    body {
        flex-direction: column; /* Stack Sidebar & Main vertically */
        height: auto;
        overflow-x: hidden; /* Prevent side-scrolling */
    }

    /* 2. SIDEBAR (Hidden Off-Screen) */
    .sidebar {
        position: fixed;
        top: 0; left: 0;
        width: 260px;
        height: 100vh;
        z-index: 20000; /* Increased to sit above everything */
        transform: translateX(-100%); /* Hide it */
        transition: transform 0.3s ease-in-out;
        box-shadow: none;
        
        /* FIX: Force Solid Background & No Blur */
        background: #111827 !important; 
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Class added by JS to show menu */
    .sidebar.active {
        transform: translateX(0); /* Slide in */
        box-shadow: 5px 0 50px rgba(0,0,0,0.5);
    }

    /* 3. MAIN CONTENT */
    .main {
        width: 100%;
        padding: 80px 20px 40px 20px; /* Top padding for the menu button */
        overflow: visible;
        height: auto;
    }

    /* 4. GRID SYSTEM FIX (Force Stacking) */
    .grid-2, .grid-3, .doc-grid, form[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* 5. TABLES (Horizontal Scroll) */
    .card {
        overflow-x: auto; 
    }
    table {
        width: 100%;
        min-width: 600px; /* Force table to keep shape */
        border-collapse: collapse;
    }

    /* 6. FORM INPUTS */
    input, select, textarea {
        width: 100%;
        font-size: 16px; /* Prevents iPhone zoom on focus */
    }

    /* 7. HAMBURGER BUTTON (Visible only on mobile) */
    .mobile-toggle-btn {
        display: flex !important;
        align-items: center; justify-content: center;
        position: fixed; top: 15px; right: 15px;
        width: 45px; height: 45px;
        background: #0ea5e9; color: white;
        border-radius: 8px;
        font-size: 1.5rem;
        z-index: 20001; /* Must be higher than sidebar */
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        cursor: pointer;
        border: none;
    }
    
    /* 8. OVERLAY (Dark background when menu is open) */
    .mobile-overlay {
        display: none;
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); /* Just dark, NO BLUR */
        z-index: 19999; /* Below sidebar */
    }
    .mobile-overlay.active { display: block; }
    
    /* 9. HIDE PROFILE HEAD IN SIDEBAR TO SAVE SPACE */
    .sidebar .profile-head {
        padding: 15px;
    }
    .sidebar .p-img {
        width: 60px; height: 60px;
    }
}

/* Hide toggle button on Desktop */
.mobile-toggle-btn, .mobile-overlay { display: none; }