/* mobile.css - Global Mobile Overrides for Agri-Gig */

@media screen and (max-width: 768px) {
    
    /* 1. Base Layout & Typography */
    body { font-size: 15px; }
    .container { padding: 0 15px; margin: 1.5rem auto; }
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.2rem !important; }

    /* 2. Navigation Fixes (Stop overlapping and squishing) */
    nav, header { 
        flex-direction: column; 
        align-items: flex-start; 
        padding: 1rem; 
        gap: 15px; 
    }
    .nav-links, .nav-menu { 
        flex-direction: column; 
        width: 100%; 
        align-items: stretch; 
        gap: 10px; 
    }
    .nav-links a, .nav-menu a, .btn-post-nav { 
        text-align: center; 
        /* Added !important below to override the inline padding on the Sign Out button */
        padding: 12px 0 !important; 
        border-left: none !important; 
        border-bottom: 1px solid rgba(255,255,255,0.1); 
        width: 100%;
        display: block;
    }

    /* 3. Forms (Stack side-by-side inputs) */
    .form-row { 
        flex-direction: column !important; 
        gap: 0 !important; 
    }
    .form-group { margin-bottom: 1.2rem; }

    /* 4. Grids (Force all dashboards into a single vertical column) */
    .dashboard-content, .stats-grid, .grid-3, .footer-grid, .split-section { 
        grid-template-columns: 1fr !important; 
        display: flex;
        flex-direction: column;
        gap: 1rem; 
    }

    /* FIX: Force the sidebar to take full width on mobile */
    .sidebar {
        width: 100% !important;
    }

    /* 5. Buttons & Action Bars (Stack buttons so they are easy to tap) */
    .action-bar { 
        flex-direction: column !important; 
        width: 100%; 
        gap: 10px;
    }
    .btn-action { 
        width: 100% !important; 
        margin: 0 !important;
        text-align: center; 
        padding: 14px; 
    }

    /* 6. Cards (Gigs, Admin, Registration) */
    .gig-card, .admin-card, .worker-card, .reg-card, .post-card, .settings-card, .stat-card { 
        padding: 1.2rem; 
    }
    .gig-header { 
        flex-direction: column; 
        gap: 15px; 
    }
    .gig-header > div { 
        text-align: left !important; 
    }
    .admin-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* 7. Modals (Make them fit the small screen) */
    .modal-content { 
        padding: 1.5rem; 
        margin: 10px; 
        max-height: 90vh; 
        overflow-y: auto; 
    }

    /* 8. Admin specific Tabs */
    .tabs { 
        flex-wrap: wrap; 
    }
    .tab-btn { 
        flex: 1 1 45%; 
        text-align: center; 
        font-size: 0.85rem; 
        padding: 10px; 
    }

    /* 9. Landing Page specific fixes */
    .hero { padding: 3rem 5% 4rem; }
    .hero h1 { font-size: 2.2rem !important; }
    .hero-ctas { flex-direction: column; }
    .hero-ctas a { width: 100%; text-align: center; }
    .trust-logos { flex-direction: column; gap: 1rem; }
    /* 10. Chat Modal Specific Fixes */
    #chatModal .modal-content {
        height: 85vh; /* Takes up 85% of the screen predictably */
        display: flex;
        flex-direction: column;
        padding: 1rem; /* Slightly tighter padding to give more room for messages */
    }
    
    #chatModal .chat-box {
        flex: 1; /* Allows the chat box to grow/shrink dynamically when the keyboard opens */
        height: auto; /* Overrides the desktop 350px fixed height */
        min-height: 0; /* Prevents scrolling bugs in mobile browsers */
        margin-bottom: 10px;
    }
    
    /* Keep the input and send button side-by-side */
    .chat-input-group {
        display: flex;
        flex-direction: row !important; 
        gap: 10px;
    }
    
    .chat-input-group input {
        flex: 1; /* Forces the text box to take up the remaining space */
    }
    
    /* Stop the global mobile CSS from making the Send button 100% width */
    .chat-input-group .btn-action {
        width: auto !important;
        padding: 12px 20px !important;
        margin: 0 !important;
        flex: 0 0 auto;
    }
}