/* CSS Mobile Fixes - The Nuclear Option for Layouts */

@media (max-width: 768px) {

    /* 1. Header & Search Fixes */
    .nav-container {
        padding: 10px 20px;
        background: white;
        /* Ensure non-transparent header bg */
    }

    .search-bar input {
        background: #f1f5f9 !important;
        /* Solid Light Grey */
        border: 1px solid #cbd5e1 !important;
        color: #333 !important;
        opacity: 1 !important;
        height: 45px;
        width: 100%;
        margin-top: 5px;
        box-shadow: none;
    }

    /* 2. Global Layout Reset */
    .container,
    .main-layout {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        display: block !important;
        /* Kill Grids */
        padding-bottom: 90px !important;
        /* SAFE AREA for Bottom Nav */
    }

    /* 3. Community Page Repair */
    .com-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding-bottom: 20px;
        /* Internal padding */
    }

    .com-view-header {
        flex-direction: column !important;
        padding: 20px !important;
        border-radius: 12px;
        text-align: center;
    }

    .com-view-content {
        margin-bottom: 20px;
        width: 100%;
    }

    .com-meta {
        justify-content: center;
        margin-bottom: 20px;
    }

    .linked-book-card {
        width: 100% !important;
        display: block;
        /* Stack internally if needed or stay flex */
    }

    /* 4. Profile Page Repair */
    .profile-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding-bottom: 90px !important;
        /* EXTRA SAFE AREA for Profile */
    }

    .p-sidebar {
        width: 100% !important;
        margin-bottom: 10px;
        /* Reduced margin */
        border: none !important;
        background: transparent !important;
    }

    .user-card {
        background: white;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        margin-bottom: 15px;
    }

    /* Horizontal Scrollable Menu for Profile Tabs */
    .p-menu {
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        background: transparent !important;
        padding: 5px 0 15px 0 !important;
        /* Add space below tabs so they don't touch content */
        gap: 10px !important;
        border: none !important;
        margin-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .p-menu .menu-item {
        background: white !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 20px !important;
        padding: 8px 16px !important;
        flex: 0 0 auto !important;
        margin-bottom: 0 !important;
        /* Reset */
    }

    .p-menu .menu-item.active {
        background: #6a017f !important;
        color: white !important;
        border-color: #6a017f !important;
    }

    /* Sections */
    .p-main {
        width: 100% !important;
    }

    .order-item {
        padding: 15px !important;
    }

    .oi-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    /* 5. General Cleanup */
    .toast-container {
        bottom: 80px !important;
        /* Above bottom nav */
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
    }

    .toast {
        min-width: 0 !important;
        width: 100% !important;
    }
}