/**
 * Responsive CSS for CRM AI Agent Benchmarking Project
 * This file contains responsive styling for various screen sizes
 */

/* Global Responsive Adjustments */
:root {
    --vh: 1vh;
    /* Custom viewport height property for mobile */
}

/* General responsive adjustments */
html,
body {
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    width: 100%;
    height: 100%;
}

.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Fix for 100vh issue on mobile browsers */
.min-h-screen {
    min-height: 100vh;
    /* Fallback */
    min-height: calc(var(--vh, 1vh) * 100);
}

/* Mobile navigation styling */
.nav-link-mobile {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    color: white;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.nav-link-mobile:hover,
.nav-link-mobile.active-nav {
    background-color: rgba(114, 137, 218, 0.2);
    color: #7289da;
}

/* Optimized glass card for mobile */
@media (max-width: 640px) {
    .glass-card {
        padding: 1rem !important;
    }
}

/* Responsive grid adjustments */
@media (max-width: 640px) {
    .grid {
        grid-gap: 1rem !important;
    }

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

/* Mobile optimized stat counters */
@media (max-width: 640px) {
    .stat-counter {
        padding: 0.75rem !important;
    }

    .count-up {
        font-size: 1.75rem !important;
    }
}

/* Responsive text adjustments */
@media (max-width: 640px) {
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    p {
        font-size: 0.9375rem !important;
    }
}

/* Responsive animation adjustments */
@media (max-width: 640px) {
    .particle {
        opacity: 0.05 !important;
        /* Reduce particle opacity on mobile for better performance */
    }

    /* Simplify animations on mobile */
    .animated {
        animation-duration: 0.5s !important;
    }
}

/* Optimized mobile forms */
@media (max-width: 640px) {

    input,
    textarea,
    select,
    button {
        font-size: 16px !important;
        /* Prevent zoom on input focus */
    }

    form input,
    form textarea,
    form select {
        padding: 0.75rem !important;
    }

    form button {
        padding: 0.75rem 1rem !important;
    }
}

/* Fixed mobile header */
@media (max-width: 768px) {
    header {
        position: sticky;
        top: 0;
        z-index: 40;
        background-color: rgba(18, 18, 18, 0.95);
        backdrop-filter: blur(10px);
    }
}

/* Responsive tables */
@media (max-width: 640px) {
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 100%;
        font-size: 0.875rem;
    }

    th,
    td {
        padding: 0.5rem !important;
    }
}

/* Responsive modals */
@media (max-width: 640px) {
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        padding: 1rem !important;
    }
}

/* Responsive buttons */
@media (max-width: 640px) {

    .business-tab,
    .developer-tab,
    .btn-primary,
    .btn {
        width: 100%;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .ripple-effect {
        display: block;
    }
}

/* Responsive footer */
@media (max-width: 640px) {
    footer {
        padding-bottom: 2rem;
    }

    .footer-links {
        justify-content: space-between;
    }

    .footer-links a {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* Optimizations for larger devices */
@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Media query for extremely small screens */
@media (max-width: 360px) {
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    .stat-counter {
        padding: 0.5rem !important;
    }
}

/* Particles optimization for better performance */
@media (max-width: 768px) {
    .particles-container {
        opacity: 0.3;
    }
}

/* Enhanced touch targets for mobile */
@media (max-width: 640px) {

    .nav-link-mobile,
    .btn,
    .tab-button,
    .feature-card,
    .quick-link,
    .dataset-card {
        min-height: 44px;
        /* Apple HIG minimum touch target size */
    }
}

/* Optimizations for landscape orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-menu {
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* Fix for iOS input zoom */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    select,
    textarea,
    input {
        font-size: 16px !important;
    }
}