/**
 * Password Visibility Toggle
 * Targets elements with class .password-toggle
 * Robust implementation that works with or without .input-group container.
 */
document.addEventListener('click', function(e) {
    const btn = e.target.closest('.password-toggle');
    if (!btn) return;

    // Search for input: 
    // 1. Inside same .input-group
    // 2. Inside same parent
    // 3. As a sibling
    let container = btn.closest('.input-group');
    let input = null;
    
    if (container) {
        input = container.querySelector('input[type="password"], input[type="text"]');
    }
    
    if (!input) {
        input = btn.parentElement.querySelector('input[type="password"], input[type="text"]');
    }
    
    if (!input) {
        // Look at previous siblings
        let prev = btn.previousElementSibling;
        while (prev) {
            if (prev.tagName === 'INPUT') {
                input = prev;
                break;
            }
            prev = prev.previousElementSibling;
        }
    }

    if (input) {
        const icon = btn.querySelector('i');

        if (input.type === 'password') {
            input.type = 'text';
            if (icon) {
                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');
            }
        } else {
            input.type = 'password';
            if (icon) {
                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');
            }
        }
    }
});