/* 
-------------------------------------------------------------------
 RESPONSIVE & MOBILE ADAPTATION
-------------------------------------------------------------------
*/

/* Tablet & Mobile Devices */
@media (max-width: 991px) {
    .container { width: 100%; padding: 0 10px; }
    
    /* Header Changes */
    .app-header { padding: 10px 0; }
    .desktop-nav { display: none; } /* Hide PC menu on mobile */
    
    /* Balance Card Adjust */
    .balance-card { border-radius: 0 0 20px 20px; padding: 20px; }
    .balance-card h2 { font-size: 2rem; }
    
    /* Grid Adjustments */
    .col-md-6, .col-md-4, .col-md-3 {
        width: 100%;
        margin-bottom: 15px;
    }
}

/* Mobile Phones (Portrait) */
@media (max-width: 576px) {
    body { font-size: 13px; background: #fff; } /* White bg for better mobile feel */
    
    .card { box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 15px; }
    
    /* Auth Pages */
    .auth-box { 
        box-shadow: none; 
        padding: 10px; 
        margin-top: 20px; 
    }
    
    /* Task List Compact */
    .task-item { padding: 12px; }
    .task-icon { width: 40px; height: 40px; font-size: 18px; }
    
    /* Buttons */
    .btn { width: 100%; margin-bottom: 10px; padding: 10px 15px; }
    .btn-group { flex-direction: column; width: 100%; }
    
    /* Modal / Popups */
    .swal2-popup { width: 90% !important; font-size: 12px !important; }
    
    /* Tables (Withdraw History) */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table { width: 100%; min-width: 500px; }
    
    /* Bottom Nav Fixes */
    .bottom-nav { padding-bottom: 15px; } /* For iPhone X+ safe area */
}

/* Large Desktop only */
@media (min-width: 992px) {
    .bottom-nav { display: none; } /* Hide App Menu on Desktop */
    .desktop-nav { display: block; }
    .main-content { padding-bottom: 0; }
}