/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    .min-h-screen {
        min-height: 100vh;
        padding: 1rem;
    }
    
    .max-w-7xl {
        max-width: 100%;
        padding: 0.5rem;
    }
    
    .grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .grid-cols-1.lg\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    /* Mobile Navigation */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e5e7eb;
        padding: 0.5rem;
        z-index: 50;
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        text-decoration: none;
        color: #6b7280;
        transition: color 0.2s;
    }
    
    .mobile-nav-item.active {
        color: #52A13F;
    }
    
    .mobile-nav-item svg {
        width: 1.5rem;
        height: 1.5rem;
        margin-bottom: 0.25rem;
    }
    
    /* Touch-friendly buttons */
    .btn-mobile {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    /* Mobile-friendly modals */
    .modal-mobile {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    
    /* Responsive text */
    .text-responsive {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
    }
    
    .text-responsive-lg {
        font-size: clamp(1rem, 3vw, 1.25rem);
    }
    
    .text-responsive-xl {
        font-size: clamp(1.25rem, 4vw, 1.5rem);
    }
}

@media (max-width: 480px) {
    .grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .px-4.sm\\:px-6.lg\\:px-8 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .py-8 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

