/* =========================================
   RESPONSIVE STYLES (Mobile & Tablet Only)
   ========================================= */

/* TABLET & MOBILE (< 992px) */
@media (max-width: 992px) {

    /* 1. Header & Navigation */
    /* 1. Header & Navigation */
    .mobile-menu-toggle {
        display: block !important;
        /* Force show on mobile */
        z-index: 2000;
        /* Ensure it's above everything */
        position: relative;
        /* Move to Right (Start of RTL) */
        order: -1;
        margin-left: auto;
        /* Push others to left if needed */
    }

    /* Fix Header Container for swapping */
    .main-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo {
        /* Ensure logo goes to the Left (End of RTL) */
        order: 2;
    }

    .logo-text {
        /* Reduce font size on mobile */
        font-size: 1rem !important;
    }

    .main-menu {
        position: fixed;
        top: 80px;
        left: auto !important;
        /* Reset Left */
        right: 20px !important;
        /* Force Right Alignment */
        width: 250px;
        max-width: 80%;
        height: auto;
        max-height: 0;
        background: #ffffff !important;
        /* Solid White */
        /* backdrop-filter removed */
        flex-direction: column;
        padding: 0;
        border-radius: 15px;
        box-shadow: none !important;
        /* Remove heavy shadow */
        transition: all 0.4s ease-in-out;
        z-index: 9999 !important;
        gap: 0;
        overflow: hidden;
        display: flex !important;
        visibility: hidden;
        opacity: 0;
        transform: translateX(20px);
        /* Slide from right */
        border: 1px solid rgba(255, 255, 255, 0.3);
        /* Subtle Border */
    }

    .main-menu.active {
        max-height: 500px;
        padding: 10px 0;
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    .main-menu a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        width: 100%;
        color: var(--primary);
    }

    .header-actions {
        display: none;
        /* Hide desktop actions */
    }

    /* 2. Hero Section */
    .hero-title {
        font-size: 2rem !important;
        text-align: center;
        border-right: none !important;
        padding-right: 0 !important;
        border-bottom: 3px solid var(--accent);
        padding-bottom: 15px;
        margin: 0 auto 20px;
        display: inline-block;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        text-align: center;
        margin: 0 auto 30px !important;
    }

    .hero-content {
        text-align: center !important;
        margin-top: 80px;
        /* More space for header */
        padding: 0 20px;
    }

    .hero-search-box {
        margin: 0 auto 20px;
    }

    .hero-actions-wrapper {
        justify-content: center;
        flex-direction: column;
    }

    .btn-hero-browse {
        width: 100%;
    }

    /* 3. Grids (Projects, Footer, etc) */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 cols on tablet */
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        /* 2 cols on tablet */
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 4. Project Details Page Fixes */
    .details-grid {
        display: block !important;
        /* Override inline grid */
    }

    .project-main-content {
        width: 100% !important;
        margin-bottom: 40px;
    }

    .project-sidebar {
        position: static !important;
        /* Remove sticky on mobile */
        width: 100% !important;
    }

    /* Fix Header alignment in project details */
    .project-header .d-flex {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }

    .project-header .text-left {
        text-align: center !important;
        width: 100%;
    }

    .project-header .status-badge {
        display: inline-block;
        margin: 0 auto 10px;
        float: none;
    }

    /* Style the duplicate mobile actions */
    .mobile-nav-actions {
        display: flex !important;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        width: 100%;
    }

    .mobile-nav-actions .btn-nav {
        /* Make them look like icons with slight background */
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* MOBILE ONLY (< 576px) */
@media (max-width: 576px) {

    /* 1. Grids to 1 Column */
    .projects-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
    }

    /* 2. Adjustments */
    .section-header h2 {
        font-size: 1.8rem !important;
    }

    .glass-filter-bar {
        flex-direction: column;
        border-radius: 10px !important;
        padding: 20px !important;
    }

    /* Mobile Toggle Styles */
    #mobileFilterToggle {
        display: flex !important;
        /* Show toggle */
    }

    #projectsFilterForm {
        display: none !important;
        /* Hide form default */
        flex-direction: column;
        gap: 10px;
        animation: fadeIn 0.3s ease;
    }

    #projectsFilterForm.active {
        display: flex !important;
        /* Show when active */
    }

    .glass-filter-bar .form-group {
        width: 100%;
        min-width: 100% !important;
    }

    /* 3. Admin Dashboard Mobile Fixes */
    .admin-sidebar {
        position: fixed;
        top: 0;
        right: -280px;
        /* Hidden off-screen (Right for RTL) */
        width: 260px;
        height: 100vh;
        z-index: 9999;
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        display: block !important;
        /* Ensure visibility for toggle */
    }

    .admin-sidebar.active {
        right: 0;
        /* Slide in */
    }

    .admin-main {
        margin-right: 0 !important;
        /* Remove sidebar margin */
        width: 100% !important;
        padding: 20px 10px;
        margin-top: 50px;
        /* Space for header toggle */
    }

    /* Admin Toggle Button (Added via JS/PHP) */
    .admin-menu-toggle {
        display: block !important;
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 10000;
        background: var(--primary);
        color: white;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Overlay for mobile sidebar */
    .sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}