/**
 * =========================================================
 * PASSWORD TOGGLE - BLUE CLEANING SERVICES
 * =========================================================
 *
 * @file assets/css/password-toggle.css
 * @description Estilos globais para botões de exibir/ocultar senha
 * @version 1.0
 * @date 2025-11-17
 *
 * USAGE:
 * <div class="password-input-wrapper">
 *     <input type="password" id="myPassword" />
 *     <button type="button" class="password-toggle" onclick="togglePasswordVisibility('myPassword')">
 *         <i class="fas fa-eye" id="myPassword-icon"></i>
 *     </button>
 * </div>
 */

/* ========================================= */
/* PASSWORD INPUT WRAPPER */
/* ========================================= */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-input-wrapper input {
    padding-right: 48px !important; /* Espaço para o botão */
    flex: 1;
    width: 100%;
}

/* ========================================= */
/* PASSWORD TOGGLE BUTTON */
/* ========================================= */
.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    z-index: 10;
}

.password-toggle:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-50%) scale(1.05);
}

.password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

.password-toggle i {
    font-size: 16px;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Estado ativo (quando senha está visível) */
.password-toggle.active {
    color: #007bff;
    opacity: 1;
}

.password-toggle.active i {
    color: #007bff;
}

/* ========================================= */
/* DARK MODE SUPPORT */
/* ========================================= */
@media (prefers-color-scheme: dark) {
    .password-toggle {
        color: #adb5bd;
    }

    .password-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .password-toggle.active {
        color: #4dabf7;
    }

    .password-toggle.active i {
        color: #4dabf7;
    }
}

/* ========================================= */
/* MOBILE RESPONSIVE */
/* ========================================= */
@media (max-width: 768px) {
    .password-toggle {
        right: 8px;
        padding: 6px;
    }

    .password-toggle i {
        font-size: 14px;
    }

    .password-input-wrapper input {
        padding-right: 40px !important;
    }
}

/* ========================================= */
/* ACCESSIBILITY */
/* ========================================= */
.password-toggle:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.password-toggle:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================= */
/* ANIMATION ENHANCEMENTS */
/* ========================================= */
@keyframes iconSwitch {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.password-toggle i.switching {
    animation: iconSwitch 0.3s ease;
}