/* GreenMarket Frontend Mobile Optimization */
/* Enhances the desktop-first frontend for mobile devices */

/* =========================================
   1. ROOT VARIABLES & SCALING
   ========================================= */
:root {
    --gm-mobile-padding: 1.25rem;
    --gm-header-height: 70px;
    --touch-target: 44px;
    --nav-height: 64px;
    /* Mobile bottom nav height */
}

/* Base resets for mobile */
html,
body {
    overflow-x: hidden;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    /* Remove blue tap box on Android */
}

/* =========================================
   2. NAVIGATION OPTIMIZATIONS
   ========================================= */

/* =========================================
   BOOTSTRAP 5 OFFCANVAS OVERRIDE (HIGH SPECIFICITY)
   Must override Bootstrap's default overflow-y: auto
   ========================================= */

/* Main offcanvas container */
html body .offcanvas,
html body .offcanvas.offcanvas-end,
html body .offcanvas.offcanvas-start,
html body .offcanvas.show,
html body div.offcanvas,
html body div.offcanvas.offcanvas-end,
#offcanvasNavbar,
#offcanvasNavbar.offcanvas {
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

/* Offcanvas header */
html body .offcanvas .offcanvas-header,
html body .offcanvas-header,
#offcanvasNavbar .offcanvas-header {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
}

/* CRITICAL: Offcanvas body - Override Bootstrap's overflow-y: auto */
html body .offcanvas .offcanvas-body,
html body .offcanvas-body,
html body .offcanvas.offcanvas-end .offcanvas-body,
html body div.offcanvas .offcanvas-body,
#offcanvasNavbar .offcanvas-body,
#offcanvasNavbar > .offcanvas-body {
    padding: 0.5rem 1rem !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    display: block !important;
}

/* Navbar nav inside offcanvas */
html body .offcanvas .navbar-nav,
html body .offcanvas-body .navbar-nav,
#offcanvasNavbar .navbar-nav,
#offcanvasNavbar .offcanvas-body .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

/* Nav items inside offcanvas */
html body .offcanvas .navbar-nav .nav-item,
html body .offcanvas-body .navbar-nav .nav-item,
#offcanvasNavbar .navbar-nav .nav-item,
#offcanvasNavbar .navbar-nav > .nav-item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

/* Nav links inside offcanvas */
html body .offcanvas .nav-link,
html body .offcanvas .navbar-nav .nav-link,
html body .offcanvas-body .navbar-nav .nav-link,
#offcanvasNavbar .nav-link,
#offcanvasNavbar .navbar-nav .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    text-decoration: none !important;
}

html body .offcanvas .nav-link:last-child,
#offcanvasNavbar .nav-link:last-child {
    border-bottom: none !important;
}

/* Active link styling */
html body .offcanvas .nav-link.active,
#offcanvasNavbar .nav-link.active {
    color: #10B981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border-radius: 6px !important;
}

/* Mobile Bottom Navigation - Polish */
.gm-mobile-nav,
.mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 10px);
    height: calc(var(--nav-height) + env(safe-area-inset-bottom, 10px)) !important;
    z-index: 1050;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    display: flex !important;
    /* Force display on mobile */
    align-items: center;
}

@media (min-width: 992px) {

    .gm-mobile-nav,
    .mobile-bottom-nav {
        display: none !important;
    }
}

.gm-mobile-nav .nav-link,
.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    padding: 0.5rem;
    min-width: 60px;
    text-decoration: none;
}

.gm-mobile-nav .nav-link i,
.mobile-bottom-nav .nav-item i {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.gm-mobile-nav .nav-link.active,
.mobile-bottom-nav .nav-item.active {
    color: #10B981;
    background: transparent;
}

/* Primary Action Button in Bottom Nav (Deposit/Plus) */
.mobile-bottom-nav .nav-item.primary {
    position: relative;
    top: -20px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: white !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-bottom-nav .nav-item.primary i {
    margin-bottom: 0;
    font-size: 1.5rem;
}

/* Navbar Tweaks */
.gm-header .navbar-toggler {
    border: none;
    padding: 0.5rem;
}

.gm-header .navbar-toggler:focus {
    box-shadow: none;
}

/* =========================================
   3. HERO SECTION RESPONSIVENESS
   ========================================= */

@media (max-width: 991.98px) {
    .gm-hero {
        padding: 100px 0 60px !important;
        /* Adjusted from 140px */
        min-height: auto !important;
        text-align: center;
    }

    .gm-hero-title {
        font-size: 2.5rem !important;
        /* Smaller than desktop 3.5rem */
        line-height: 1.2 !important;
    }

    .gm-hero p {
        margin-left: auto;
        margin-right: auto;
        font-size: 1rem !important;
    }

    /* Stack buttons on mobile */
    .gm-hero .d-flex.flex-wrap {
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    .gm-hero .gm-btn-primary,
    .gm-hero .gm-btn-outline {
        width: 100%;
        justify-content: center;
    }

    /* Trust Indicators Grid */
    .gm-hero .d-flex.flex-wrap.gap-4 {
        justify-content: center;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 1rem !important;
        margin-top: 2rem;
    }

    /* Dashboard Preview - Mobile Adaptation */
    .gm-dashboard-preview {
        margin-top: 3rem;
        transform: scale(0.95);
        transform-origin: center top;
    }

    /* Hide complex floating animations on mobile to improve performance */
    .gm-float-card,
    .gm-float-card-2 {
        display: none !important;
    }

    .gm-orb {
        opacity: 0.3;
        /* Reduce glare on small screens */
    }
}

/* =========================================
   4. SECTIONS & LAYOUT
   ========================================= */

@media (max-width: 767.98px) {
    section {
        padding: 60px 0 !important;
        /* reduce standard 100px padding */
    }

    .container {
        padding-left: var(--gm-mobile-padding);
        padding-right: var(--gm-mobile-padding);
    }

    /* Add padding to bottom of page to prevent nav coverage */
    body {
        padding-bottom: 80px;
    }

    /* Stats Bar - Stacked */
    .row.text-center.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .row.text-center.py-5 .col-6 {
        margin-bottom: 2rem;
    }

    /* Section Headings */
    h2 {
        font-size: 2rem !important;
    }

    /* Category Cards */
    .gm-category-card {
        padding: 24px !important;
        margin-bottom: 1rem;
    }

    /* Project Cards */
    .gm-project-card {
        margin-bottom: 1rem;
    }

    /* CTA Section */
    .col-lg-8.text-center.text-lg-start {
        text-align: center !important;
        margin-bottom: 2rem;
    }

    .col-lg-4.text-center.text-lg-end {
        text-align: center !important;
    }

    .col-lg-4.text-center.text-lg-end .btn {
        width: 100%;
    }
}

/* =========================================
   5. FOOTER OPTIMIZATION
   ========================================= */

@media (max-width: 991.98px) {
    .gm-footer {
        padding-top: 60px !important;
        padding-bottom: 100px;
        /* Space for bottom nav */
    }

    /* Hide large decorative gradients on mobile */
    .gm-footer::before,
    .gm-footer::after {
        opacity: 0.1;
        width: 100%;
        left: 0;
        transform: none;
    }

    .gm-footer-top-stats {
        flex-direction: column;
        gap: 2rem;
    }

    .gm-footer-newsletter {
        padding: 20px !important;
        margin-top: 2rem;
    }

    .gm-footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .gm-footer-bottom-links {
        justify-content: center;
    }
}

/* =========================================
   6. DASHBOARD SPECIFIC MOBILE STYLES
   ========================================= */

@media (max-width: 991.98px) {

    /* Dashboard Overlay */
    .dashboard-wrapper {
        padding-bottom: 80px;
        /* Space for bottom nav */
    }

    /* Ultra Header Mobile */
    .ultra-header {
        padding: 1rem !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Hide desktop-only header elements */
    .header-center,
    .header-right .header-actions button:not(.notification-active),
    .profile-info,
    .profile-arrow {
        display: none !important;
    }

    /* Simplify Profile Avatar */
    .user-profile-ultra .profile-avatar {
        width: 36px;
        height: 36px;
    }

    /* Sidebar Overlay transition */
    .sidebar-overlay {
        z-index: 1040;
    }

    .dashboard-sidebar {
        z-index: 1050;
    }

    /* Stats Grid Stacking */
    .stats-showcase,
    .feature-cards-grid,
    .quick-actions-premium {
        grid-template-columns: 1fr 1fr !important;
        /* 2 columns on mobile instead of 4/6 */
        gap: 12px !important;
    }

    /* Feature Cards - simplified */
    .feature-card {
        padding: 20px !important;
    }

    .feature-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }

    /* Transaction Tables - Make Scrollable & Visible */
    .tx-table-container {
        margin: 0 -20px;
        /* Negative margin to bleed to edge */
        padding: 0 20px;
        width: calc(100% + 40px);
    }

    /* Force show important columns */
    .tx-table th,
    .tx-table td {
        white-space: nowrap;
        /* Prevent wrapping */
        padding: 1rem !important;
    }

    /* Ensure no columns are hidden by existing media queries in other files */
    .tx-table th:nth-child(5),
    .tx-table th:nth-child(6),
    .tx-table td:nth-child(5),
    .tx-table td:nth-child(6) {
        display: table-cell !important;
        /* Override hiding */
    }

    /* Investments Page Grid */
    .investment-card .position-relative {
        height: 160px !important;
    }
}

@media (max-width: 576px) {

    /* Even tighter grid for small phones */
    .quick-actions-premium {
        grid-template-columns: 1fr 1fr 1fr !important;
        /* 3 cols for actions */
    }

    .action-btn-premium {
        padding: 16px 8px !important;
    }

    .action-icon-wrapper {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }
}

/* =========================================
   7. UTILITIES
   ========================================= */

/* Ensure images are fluid */
img {
    max-width: 100%;
    height: auto;
}

/* Improved touch targets for links */
a,
button {
    touch-action: manipulation;
}

/* =========================================
   8. DASHBOARD PROJECTS PAGE
   ========================================= */

@media (max-width: 991.98px) {

    /* Hero Section */
    .projects-hero {
        padding: 1.5rem !important;
        text-align: center;
    }

    .hero-content {
        flex-direction: column;
        justify-content: center;
        gap: 1.5rem;
    }

    .hero-title h1 {
        justify-content: center;
        font-size: 1.75rem;
    }

    .hero-stats {
        justify-content: center;
        margin-top: 1rem;
        gap: 1rem;
    }

    .hero-stat .stat-value {
        font-size: 1.4rem;
    }

    /* Balance Card */
    .hero-balance-card {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        /* Stack details */
        text-align: center;
    }

    /* Filter Bar - Horizontal Scroll */
    .filter-bar-ultra {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .filter-tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
        /* Space for scrollbar if visible */
        justify-content: flex-start;
        /* Hide scrollbar */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-tab {
        flex-shrink: 0;
    }

    .filter-actions {
        width: 100%;
    }

    .filter-btn {
        width: 100%;
        justify-content: center;
    }

    /* Projects Grid */
    .projects-grid {
        grid-template-columns: 1fr !important;
        /* Single column on mobile */
        gap: 1rem;
        display: grid !important;
    }

    /* Project Card Adjustments */
    .project-card-ultra {
        border-radius: 20px;
    }

    .project-card-ultra .card-image {
        height: 160px;
    }

    .investment-details {
        padding: 0.75rem 0 !important;
    }

    .detail-value {
        font-size: 0.9rem !important;
    }

    .roi-number {
        font-size: 2.5rem !important;
    }
}

/* =========================================
   9. PROJECT DETAIL ULTRA PAGE
   ========================================= */

@media (max-width: 991.98px) {

    /* Hero */
    .project-hero {
        min-height: auto;
        padding: 24px;
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-badges {
        justify-content: center;
    }

    .project-title {
        font-size: 1.75rem !important;
        text-align: center;
    }

    .roi-mega {
        justify-content: center;
        flex-wrap: wrap;
    }

    .roi-mega .roi-number {
        font-size: 3rem !important;
    }

    /* Layout */
    .project-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column;
    }

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

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

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

    /* Adjust sidebar card */
    .invest-card {
        top: 0;
    }
}

/* =========================================
   10. MOBILE FIXES & REFINEMENTS
   ========================================= */

@media (max-width: 991.98px) {

    /* Fix Hero Content Cropping */
    .hero-content {
        padding: 0 1rem;
        width: 100%;
        box-sizing: border-box;
    }

    .projects-hero {
        padding: 2rem 1rem !important;
        /* Increase padding */
        border-radius: 20px;
        /* Reduced from 28px for better mobile fit */
        margin: 0 10px 20px;
        /* Add margin so it doesn't touch screen edges */
    }

    /* Fix Stats Layout */
    .hero-stats {
        display: flex;
        flex-wrap: nowrap;
        /* Prevent wrapping if possible, or scroll */
        justify-content: space-around;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .hero-stat {
        flex: 1;
        text-align: center;
    }

    /* Balance Card - Fix Alignment */
    .hero-balance-card {
        margin-top: 1rem;
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1.5rem;
    }

    .balance-info {
        text-align: center;
        margin: 10px 0;
    }

    /* Filter Bar Fixes */
    .filter-bar-ultra {
        padding: 0 10px;
        /* Align with hero margin */
    }

    .filter-tabs {
        margin-bottom: 0.5rem;
    }

    /* Bottom Nav Z-Index Fix */
    .gm-mobile-nav,
    .mobile-bottom-nav {
        z-index: 9999 !important;
        /* Ensure it's above everything */
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(15, 23, 42, 1) !important;
        /* Solid background prevents bleed-through */
    }

    /* Prevent content being hidden behind bottom nav */
    .dashboard-wrapper,
    .projects-ultra-page {
        padding-bottom: 100px !important;
    }

    /* Project Card Image Height */
    .project-card-ultra .card-image {
        height: 180px;
        /* Restore slightly taller image */
    }

    /* Category Tag Alignment */
    .category-tag {
        z-index: 2;
        /* Ensure above image overlays */
    }
}

/* =========================================
   11. PROJECTS PAGE MOBILE REFINEMENTS
   ========================================= */

@media (max-width: 991.98px) {

    /* Hero Content Adjustment */
    .hero-content {
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Reduce Hero Padding to Fit */
    .projects-hero {
        padding: 1.5rem 1rem !important;
        margin: 0 10px 20px;
    }

    /* Stats Layout */
    .hero-stats {
        width: 100%;
        justify-content: space-around;
        gap: 0;
        margin-top: 1rem;
    }

    .hero-stat {
        flex: 1;
        padding: 0 5px;
    }

    /* Balance Card - Compact */
    .hero-balance-card {
        width: 100%;
        padding: 1rem;
        margin-top: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .balance-info {
        text-align: center;
    }

    /* Filter Bar - Horizontal Scroll */
    .filter-bar-ultra {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 0 10px;
    }

    .filter-tabs {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: flex-start;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .filter-tab {
        flex-shrink: 0;
    }

    .filter-btn {
        width: 100%;
        justify-content: center;
    }

    /* Projects Grid - Single Column */
    .projects-grid {
        grid-template-columns: 1fr !important;
        padding: 0 10px;
    }

    /* Card Adjustments */
    .project-card-ultra {
        margin-bottom: 1rem;
    }

    .card-image {
        height: 180px;
    }

    .investment-details {
        padding: 0.75rem 0;
    }

    /* Pagination */
    .pagination-ultra {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
}

/* =========================================
   12. CRITICAL UI FIXES
   ========================================= */

/* Fix Mobile Bottom Nav Stretching */
.mobile-bottom-nav .nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 0 10px;
}

/* Ensure container centers items if it's flex */
.gm-mobile-nav,
.mobile-bottom-nav {
    justify-content: center;
}

/* Fix Offcanvas Menu items display - REMOVED conflicting styles */
/* Styles are now defined at top of file with high specificity */

/* Fix hamburger menu icon alignment if needed */
.navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   13. OFFCANVAS VISIBILITY - CONSOLIDATED
   ========================================= */
/* Main styles now at top of file with high specificity */

/* Login Button in Menu */
#offcanvasNavbar .gm-btn-primary,
.offcanvas-body .gm-btn-primary {
    display: block !important;
    width: 100% !important;
    padding: 10px 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: white !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    border-radius: 8px !important;
    text-align: center !important;
    margin-top: 8px !important;
}

/* =========================================
   14-15. CONSOLIDATED - MAIN STYLES AT TOP OF FILE
   ========================================= */
/* All offcanvas navigation styles are now defined at the top 
   of this file with high specificity to override Bootstrap */