/* ====================================================
   Mobile-First Responsive Enhancements
   ==================================================== */

/* ===== Touch Target Improvements ===== */
/* Minimum 44x44px touch targets per accessibility guidelines */
@media (max-width: 768px) {
    button,
    a.btn,
    .btn,
    input[type="submit"],
    input[type="button"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Increase padding on interactive elements */
    button:not(.btn-close),
    a.btn {
        padding: 0.75rem 1.25rem;
    }

    /* Icon-only buttons need extra padding */
    button.p-2 {
        padding: 0.75rem !important;
    }

    /* Form inputs should be larger for easier typing */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    /* Select dropdowns */
    select {
        background-size: 16px 16px;
        padding-right: 2.5rem;
    }
}

/* ===== Mobile Navigation Improvements ===== */
@media (max-width: 1024px) {
    /* Ensure mobile menu button is easily tappable */
    .lg\:hidden button {
        min-width: 48px;
        min-height: 48px;
        touch-action: manipulation;
    }

    /* Navigation items should be easier to tap */
    nav a {
        padding: 1rem !important;
        margin-bottom: 0.5rem;
    }

    /* Bottom navigation area */
    .border-t.border-white\/20 a,
    .border-t.border-white\/20 button {
        padding: 0.875rem 0.75rem;
    }
}

/* ===== Profile Editor Mobile Optimizations ===== */
@media (max-width: 768px) {
    /* Tab navigation - make tabs stack better on mobile */
    .grid.grid-cols-3 {
        gap: 0.5rem;
    }

    /* Sliders need more touch area */
    input[type="range"] {
        height: 32px;
        -webkit-appearance: none;
        appearance: none;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 28px;
        height: 28px;
        cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
        width: 28px;
        height: 28px;
        cursor: pointer;
    }

    /* Form field labels should be larger */
    label {
        font-size: 0.938rem;
        margin-bottom: 0.5rem;
        display: block;
    }

    /* Help text should be readable */
    .text-xs {
        font-size: 0.813rem;
    }

    .text-sm {
        font-size: 0.875rem;
    }
}

/* ===== Date Idea Cards Mobile Optimizations ===== */
@media (max-width: 768px) {
    /* Card padding adjustments */
    .backdrop-blur-xl.bg-white\/90 {
        margin-bottom: 1rem;
    }

    .backdrop-blur-xl .p-6 {
        padding: 1rem;
    }

    /* Match analysis grid - single column on mobile */
    .match-analysis .grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Score badges should be larger and more readable */
    .match-analysis .flex.items-center {
        padding: 0.625rem;
    }

    /* Event details spacing */
    .space-y-3 {
        gap: 0.875rem;
    }

    /* Expandable details button */
    button.inline-flex.items-center {
        padding: 0.75rem 1rem;
        font-size: 0.938rem;
    }

    /* Footer buttons */
    .bg-gray-50 a.inline-flex {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
}

/* ===== Search Form Mobile Optimizations ===== */
@media (max-width: 768px) {
    /* Search criteria grid - stack on mobile */
    .grid.grid-cols-1.md\:grid-cols-3 {
        gap: 1rem;
    }

    .grid.grid-cols-1.md\:grid-cols-2 {
        gap: 1rem;
    }

    /* Search button should be full-width on mobile */
    .flex.justify-end button[type="submit"] {
        width: 100%;
        justify-content: center;
    }

    /* Profile select dropdown */
    #profileSelect {
        font-size: 16px;
    }
}

/* ===== Modal Mobile Optimizations ===== */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 0.5rem;
    }

    .modal-content {
        max-height: 95vh;
        border-radius: 0.75rem;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-header h3 {
        font-size: 1.25rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 1rem;
        flex-direction: column;
    }

    .modal-footer button {
        width: 100%;
    }

    /* Profile share modal */
    .backdrop-blur-xl button {
        touch-action: manipulation;
    }
}

/* ===== Typography Mobile Optimizations ===== */
@media (max-width: 768px) {
    /* Headings should be slightly smaller on mobile */
    h1 {
        font-size: 2rem;
        line-height: 2.25rem;
    }

    h2 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    h3 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    h5 {
        font-size: 1.125rem;
        line-height: 1.625rem;
    }

    /* Improve readability */
    p {
        line-height: 1.625;
    }

    /* Card titles */
    .text-xl {
        font-size: 1.125rem;
    }

    .text-4xl {
        font-size: 2rem;
    }
}

/* ===== Spacing and Layout Mobile Optimizations ===== */
@media (max-width: 768px) {
    /* Reduce outer padding on mobile */
    .max-w-6xl.mx-auto.p-8 {
        padding: 1rem;
    }

    /* Hero sections */
    .mb-12 {
        margin-bottom: 2rem;
    }

    /* Card grids should have less gap */
    .gap-6 {
        gap: 1rem;
    }

    .space-x-3 > * + * {
        margin-left: 0.5rem;
    }

    .space-x-4 > * + * {
        margin-left: 0.75rem;
    }

    /* Flex containers should wrap */
    .flex.items-center {
        flex-wrap: wrap;
    }

    .flex.justify-between {
        gap: 0.75rem;
    }
}

/* ===== Image and Media Mobile Optimizations ===== */
@media (max-width: 768px) {
    /* Profile images */
    .w-8.h-8 {
        width: 2.5rem;
        height: 2.5rem;
    }

    .w-10.h-10 {
        width: 3rem;
        height: 3rem;
    }

    /* Event images in debug mode */
    .relative.h-48 {
        height: 12rem;
    }

    /* Gradient orbs should be smaller on mobile */
    .w-96.h-96 {
        width: 16rem;
        height: 16rem;
    }
}

/* ===== Admin Dashboard Mobile Optimizations ===== */
@media (max-width: 768px) {
    /* Stats grid should be single column */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Table wrapper should scroll horizontally */
    .users-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Table should have minimum width to prevent cramping */
    .users-table table {
        min-width: 600px;
    }

    /* Action buttons should be slightly smaller */
    .action-buttons {
        gap: 0.25rem;
    }

    .btn-action {
        width: 32px;
        height: 32px;
    }
}

/* ===== Subscription Page Mobile Optimizations ===== */
@media (max-width: 768px) {
    /* Pricing cards should stack */
    .grid[class*="grid-cols"] > div {
        width: 100%;
    }

    /* Usage indicators */
    .usage-bar {
        max-width: 100%;
    }
}

/* ===== Landscape Mobile Optimizations ===== */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    .py-6 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Modals should use more screen space */
    .modal-content {
        max-height: 90vh;
    }

    /* Hero sections more compact */
    .mb-12 {
        margin-bottom: 1rem;
    }
}

/* ===== Tablet Optimizations (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Slightly increase touch targets */
    button,
    a.btn {
        min-height: 42px;
    }

    /* Form inputs */
    input,
    select,
    textarea {
        font-size: 15px;
    }

    /* Grid adjustments */
    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Profile editor tabs */
    .grid.grid-cols-3.lg\:grid-cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== Improved Scrolling Performance ===== */
@media (max-width: 768px) {
    /* Smooth scrolling for all containers */
    * {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Optimize paint performance */
    .backdrop-blur-xl {
        will-change: transform;
    }
}

/* ===== Focus States for Touch Devices ===== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    *:hover {
        /* Prevent hover state persistence on touch */
        transition-duration: 0s;
    }

    /* Enhance focus for touch */
    button:active,
    a:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* Remove outline on touch, use visual feedback instead */
    *:focus {
        outline: none;
    }

    *:focus-visible {
        outline: 2px solid rgba(139, 92, 246, 0.6);
        outline-offset: 2px;
    }
}

/* ===== Safe Area Insets for Notched Devices ===== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .lg\:ml-64 {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }

        .fixed.inset-0 {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }
}

/* ===== Accessibility Improvements for Mobile ===== */
@media (max-width: 768px) {
    /* Ensure sufficient color contrast */
    .text-gray-600 {
        color: #4b5563;
    }

    .text-gray-500 {
        color: #6b7280;
    }

    /* Make badges more readable */
    .badge,
    .plan-badge,
    .status-badge {
        font-size: 0.813rem;
        padding: 0.375rem 0.75rem;
    }

    /* Ensure icons are visible */
    i {
        font-size: 1.125rem;
    }
}