/* Mobile Login Enhancements */

/* Ensure touch responsiveness on all interactive elements */
button,
a,
input,
select,
textarea,
.btn,
.btn-replit,
.auth-button,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Improve form inputs for mobile */
input,
select,
textarea {
    font-size: 16px !important; /* Prevents zoom on iOS when focusing inputs */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Better touch targets */
@media (pointer: coarse) {
    button,
    a.btn,
    .btn,
    .btn-replit,
    .auth-button,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
    }
    
    .btn-close {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    /* Improve scrolling performance */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure proper spacing for touch */
    .login-card,
    .login-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Better button states for touch */
    .btn-replit.touched,
    .auth-button.touched,
    .btn:active {
        opacity: 0.9;
        transform: scale(0.98);
    }
    
    /* Ensure modals work on mobile */
    .modal {
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    /* Fix iOS rubber band scrolling */
    body {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
    
    .login-container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS only styles */
    body {
        cursor: pointer; /* Improves touch responsiveness */
    }
    
    /* Fix iOS button appearance */
    input[type="submit"],
    input[type="button"],
    button {
        -webkit-appearance: none;
        border-radius: 10px;
    }
    
    /* Fix iOS zoom on form focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Android specific fixes */
@media (hover: none) and (pointer: coarse) and (min-resolution: 2dppx) {
    /* High DPI Android devices */
    .btn-replit,
    .auth-button {
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .login-card {
        padding: 1rem;
        margin: 0.5rem;
    }
    
    .logo-svg,
    .logo img {
        max-height: 50px;
    }
    
    .company-name,
    h1 {
        font-size: 1.2rem;
    }
    
    .tagline,
    .subtitle {
        font-size: 0.8rem;
    }
    
    .btn-replit,
    .auth-button {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
    
    .security-badge,
    .info-box {
        font-size: 0.75rem;
        padding: 8px;
    }
}

/* Accessibility improvements for touch */
@media (hover: none) {
    /* Remove hover effects on touch devices */
    .btn-replit:hover,
    .auth-button:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Add active states for touch feedback */
    .btn-replit:active,
    .auth-button:active {
        opacity: 0.8;
        transform: scale(0.98);
        transition: all 0.1s ease;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-replit,
    .auth-button {
        border: 2px solid currentColor;
    }
    
    .btn-replit:focus,
    .auth-button:focus {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .bg-animation {
        display: none;
    }
}

/* Fix for sticky hover on touch devices */
@media (hover: hover) and (pointer: fine) {
    /* Only apply hover effects on devices that truly support hover */
    .btn-replit:hover,
    .auth-button:hover {
        background: #1a2332;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(15, 21, 36, 0.4);
    }
}

/* Ensure proper focus styles for keyboard navigation */
.btn-replit:focus-visible,
.auth-button:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 3px;
}

/* Remove focus styles for touch/mouse interaction */
.btn-replit:focus:not(:focus-visible),
.auth-button:focus:not(:focus-visible) {
    outline: none;
}