/* Login Modal Mobile Centering Fix */
@media (max-width: 768px) {
    /* When modal is set to display block, make it flex for centering */
    #loginModal[style*="display: block"],
    #schoolModal[style*="display: block"],
    .modal[style*="display: block"] {
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }
    
    .modal-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 400px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* Login specific modal adjustments */
    #loginModal .modal-content,
    .login-content {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }
    
    /* Ensure modal is centered even with dynamic content */
    .modal.show,
    .modal[style*="display: block"] {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
    
    /* Close button positioning */
    .modal-content .close-btn {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }
    
    /* Form adjustments for mobile */
    .login-form {
        gap: 1rem !important;
    }
    
    .form-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.875rem 1.25rem !important;
    }
    
    .login-btn {
        padding: 0.875rem !important;
        font-size: 1rem !important;
    }
    
    .user-type-toggle {
        padding: 0.25rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .toggle-option {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Modal header adjustments */
    .modal-header {
        margin-bottom: 1.5rem !important;
    }
    
    .modal-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .modal-subtitle {
        font-size: 0.875rem !important;
    }
    
    /* Form options on mobile */
    .form-options {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }
    
    .remember-me {
        font-size: 0.875rem !important;
    }
    
    .forgot-password {
        font-size: 0.875rem !important;
    }
    
    /* Signup link */
    .signup-link {
        margin-top: 1.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Admin badge on mobile */
    .admin-badge {
        font-size: 0.625rem !important;
        padding: 0.25rem 0.5rem !important;
        top: 0.75rem !important;
        left: 0.75rem !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .modal {
        padding: 0.5rem;
    }
    
    .modal-content {
        max-width: 100% !important;
        margin: 0.5rem !important;
        border-radius: 12px !important;
    }
    
    #loginModal .modal-content,
    .login-content {
        padding: 1.25rem !important;
    }
    
    .modal-title {
        font-size: 1.25rem !important;
    }
    
    .form-input {
        padding: 0.75rem 1rem !important;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .modal {
        padding: 0.5rem;
    }
    
    .modal-content {
        max-height: 85vh !important;
    }
    
    .login-form {
        gap: 0.75rem !important;
    }
    
    .modal-header {
        margin-bottom: 1rem !important;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .modal {
            -webkit-overflow-scrolling: touch;
        }
        
        .modal-content {
            -webkit-transform: none !important;
        }
    }
}