/* mobile.css - Universal Mobile Polish for GIMAU Wiki */

/* TABLET & SMALL DESKTOP FIXES (Under 850px) */
@media (max-width: 850px) {
    /* Collapse all 2-column layouts into a single column */
    .dashboard-grid, 
    .form-grid, 
    .featured-layout, 
    .two-column, 
    .filter-grid {
        grid-template-columns: 1fr !important;
    }

    /* Stop infoboxes from sticking to the top so they flow naturally */
    .infobox-section, 
    .side-box {
        position: static !important;
        margin-top: 2rem;
    }
}

/* MOBILE PHONE FIXES (Under 600px) */
@media (max-width: 600px) {
    /* Reduce outer container margins so content uses the full screen width */
    .container { 
        padding: 0.5rem; 
        margin: 1rem auto; 
    }
    
    /* Shrink the giant hero headers */
    .hero { 
        padding: 2rem 1rem; 
    }
    .hero h1 { 
        font-size: 1.8rem; 
    }

    /* Reduce the thick padding inside forms and cards to save screen space */
    .form-card, 
    .auth-card, 
    .section-card, 
    .receipt-card, 
    .section-box, 
    .filter-card { 
        padding: 1.2rem; 
    }

    /* Make all buttons full-width for easy thumb tapping */
    .btn { 
        width: 100%; 
        text-align: center; 
        margin-bottom: 0.5rem; 
        box-sizing: border-box; 
    }

    /* Allow wide tables (like the dashboard) to be swiped left/right */
    .table-wrap { 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
    }

    /* CRITICAL: Force inputs to be at least 16px to prevent iPhones from auto-zooming */
    input[type="text"], 
    input[type="number"], 
    input[type="email"], 
    input[type="password"], 
    input[type="url"], 
    textarea, 
    select { 
        font-size: 16px !important; 
    }

    /* Stack the search bar and button vertically on the homepage */
    .search-form { 
        flex-direction: column; 
    }
    .search-bar { 
        width: 100%; 
        margin-bottom: 0.5rem; 
        box-sizing: border-box; 
    }
}