﻿
/* CleanDation – Passwort anzeigen/verbergen */

.auth-password-field {
    width: 100%;
    min-width: 0;
}

    .auth-password-field .form-floating {
        position: relative;
    }

    .auth-password-field .auth-password-input {
        padding-right: 3.75rem;
    }

    .auth-password-field .form-floating > label {
        right: 3.5rem;
        width: auto;
        pointer-events: none;
    }

    .auth-password-field .auth-password-toggle {
        position: absolute;
        top: 50%;
        right: 0.55rem;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        transform: translateY(-50%);
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #64748b;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

        .auth-password-field .auth-password-toggle:hover {
            background: #eef4ff;
            color: #0050e8;
        }

        .auth-password-field .auth-password-toggle:focus-visible {
            outline: 3px solid #80b8ff;
            outline-offset: 1px;
        }

        .auth-password-field .auth-password-toggle svg {
            display: block;
            flex-shrink: 0;
            pointer-events: none;
        }


        /* Passwort verborgen: nur das normale Auge anzeigen */

        .auth-password-field .auth-password-toggle[aria-pressed="false"] .auth-password-eye {
            display: block;
        }

        .auth-password-field .auth-password-toggle[aria-pressed="false"] .auth-password-eye-off {
            display: none;
        }

        /* Passwort sichtbar: nur das durchgestrichene Auge anzeigen */

        .auth-password-field .auth-password-toggle[aria-pressed="true"] .auth-password-eye {
            display: none;
        }

        .auth-password-field .auth-password-toggle[aria-pressed="true"] .auth-password-eye-off {
            display: block;
        }


@media (prefers-reduced-motion: reduce) {
    .auth-password-field .auth-password-toggle {
        transition: none;
    }
}


/* Schwebende Labels ohne weißen Hintergrund */

.auth-page .form-floating > label::after {
    background: transparent !important;
}

/* Eingabefelder mit einheitlichem Hintergrund */

.auth-page .form-floating > .form-control {
    background-color: transparent;
}

    /* Autofill durch den Browser */

    .auth-page .form-floating > .form-control:-webkit-autofill,
    .auth-page .form-floating > .form-control:-webkit-autofill:hover,
    .auth-page .form-floating > .form-control:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #e7f0ff inset;
        -webkit-text-fill-color: #172b4d;
    }
