/* Mobile Optimizations for MSFKisaran Login Page */

/* Enhanced touch targets for mobile devices */
@media (max-width: 768px) {
    /* Increase touch target size for password toggle */
    .password-toggle {
        min-width: 50px !important;
        min-height: 50px !important;
        padding: 1rem !important;
        font-size: 1.2rem !important;
        border-radius: 8px !important;
        /* Ensure it's above other elements */
        z-index: 100 !important;
        /* Remove excessive visual feedback */
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        /* Remove background on default state */
        background: transparent !important;
    }
    
    /* Ensure password input has enough space */
    .form-input[type="password"],
    .form-input[type="text"] {
        padding-right: 4.5rem !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Make login button easier to tap */
    .login-btn {
        min-height: 48px !important;
        font-size: 1rem !important;
        padding: 1rem !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    /* Ensure form inputs are properly sized */
    .form-input {
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 1rem 1rem 1rem 3rem !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .password-toggle {
        min-width: 52px !important;
        min-height: 52px !important;
        padding: 1.1rem !important;
        font-size: 1.3rem !important;
        border-radius: 10px !important;
    }
    
    .form-input[type="password"],
    .form-input[type="text"] {
        padding-right: 4.75rem !important;
    }
    
    .login-btn {
        min-height: 50px !important;
        font-size: 1.1rem !important;
        padding: 1.1rem !important;
    }
}

/* Landscape mode optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    .password-toggle {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0.9rem !important;
        font-size: 1.1rem !important;
    }
    
    .form-input[type="password"],
    .form-input[type="text"] {
        padding-right: 4.25rem !important;
    }
    
    /* Reduce container height in landscape */
    .login-container {
        padding: 1.5rem !important;
        margin: 0.5rem auto !important;
    }
    
    .logo-section {
        margin-bottom: 1rem !important;
    }
    
    .form-group {
        margin-bottom: 0.75rem !important;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .password-toggle {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 1rem !important;
        font-size: 1.1rem !important;
    }
    
    .form-input[type="password"],
    .form-input[type="text"] {
        padding-right: 4.25rem !important;
    }
}

/* Desktop optimizations - prevent excessive scaling */
@media (min-width: 1025px) {
    .password-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
        border-radius: 6px !important;
    }
    
    .form-input[type="password"],
    .form-input[type="text"] {
        padding-right: 4rem !important;
    }
    
    /* Prevent container from getting too large */
    .login-container {
        max-width: 450px !important;
        padding: 3rem !important;
    }
}

/* Prevent zoom on input focus (iOS) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .form-input {
        font-size: 16px !important;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .password-toggle {
        border: none !important;
    }
}

/* Dark mode support (if user prefers) */
@media (prefers-color-scheme: dark) {
    .password-toggle {
        background: transparent !important;
        color: #6B7280 !important;
    }
    
    .password-toggle:hover {
        background: rgba(37, 99, 235, 0.1) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .password-toggle {
        transition: none !important;
    }
    
    .password-toggle:active {
        transform: translateY(-50%) !important;
    }
}

/* Focus indicators for accessibility - subtle */
.password-toggle:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.3) !important;
    outline-offset: 1px !important;
    border-radius: 6px !important;
}

/* Active state improvements - minimal visual feedback */
.password-toggle:active {
    transform: translateY(-50%) scale(0.98) !important;
    background: rgba(37, 99, 235, 0.1) !important;
    transition: all 0.05s ease !important;
}

/* Hover state for non-touch devices - subtle */
@media (hover: hover) {
    .password-toggle:hover {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563EB !important;
    }
}

/* Touch device specific styles - minimal feedback */
@media (hover: none) and (pointer: coarse) {
    .password-toggle {
        /* Remove hover effects on touch devices */
    }
    
    .password-toggle:active {
        background: rgba(37, 99, 235, 0.1) !important;
        transform: translateY(-50%) scale(0.98) !important;
    }
}