.auth-input-code {
    padding-right: 110px !important;
}
.auth-btn-code {
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease-in-out;
}
.auth-btn-code:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    opacity: 0.9;
}
.auth-btn-code:active {
    transform: translateY(-50%) scale(0.95);
}

.auth-input-password {
    padding-right: 45px !important;
}

/* Remove Bootstrap's native validation background icons to prevent overlapping with the eye icon */
.auth-input-password:invalid,
.auth-input-password:valid,
.auth-input-password.is-invalid,
.auth-input-password.is-valid {
    background-image: none !important;
    padding-right: 45px !important;
}

.auth-password-toggle {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 50%;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-password-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--bs-primary) !important;
}
.auth-password-toggle:active {
    background-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-50%) scale(0.9);
}

/* For dark mode */
[data-pc-theme="dark"] .auth-password-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
[data-pc-theme="dark"] .auth-password-toggle:active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Auth Logo Auto Theme Switch */
.logo-theme-dark {
    display: none !important;
}
.logo-theme-light {
    display: inline-block !important;
}

[data-pc-theme="dark"] .logo-theme-light,
[data-bs-theme="dark"] .logo-theme-light,
.theme-dark .logo-theme-light {
    display: none !important;
}

[data-pc-theme="dark"] .logo-theme-dark,
[data-bs-theme="dark"] .logo-theme-dark,
.theme-dark .logo-theme-dark {
    display: inline-block !important;
}

/* Height Utilities */
.hei-40 { height: 40px !important; width: auto !important; }
.hei-45 { height: 45px !important; width: auto !important; }
.hei-50 { height: 50px !important; width: auto !important; }
.hei-60 { height: 60px !important; width: auto !important; }