/* Main Password Wrapper */
.password-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure the input has space on the right for the icon */
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
    width: 100% !important;
    padding-right: 40px !important;
    display: block !important;
}

/* THE EYE ICON - MUST BE ON THE RIGHT */
.password-toggle-icon {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2000 !important; /* Above everything else */
    cursor: pointer !important;
    color: #6c757d !important;
    font-size: 18px !important;
    background: transparent !important;
    border: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hover effect */
.password-toggle-icon:hover {
    color: #3b82f6 !important;
}

/* Reset any AdminLTE or Bootstrap interference */
.form-group .password-wrapper {
    display: block !important;
}

/* Modal specific overrides (extra safety) */
.modal-body .password-wrapper {
    width: 100% !important;
}