/* Globaler Sichtbarkeitsschalter fuer Passwort- und PIN-Felder. */
.kk-password-field {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.kk-password-field > input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline-end: 54px !important;
}

.kk-password-toggle {
    position: absolute !important;
    z-index: 3;
    inset-block-start: 50% !important;
    inset-inline-end: 4px !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 10px !important;
    outline: 0 !important;
    background: transparent !important;
    color: #667085 !important;
    box-shadow: none !important;
    font: inherit !important;
    line-height: 1 !important;
    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.kk-password-toggle:hover {
    background: #eef2f6 !important;
    color: #172033 !important;
}

.kk-password-toggle:focus-visible {
    outline: 3px solid rgba(178, 15, 27, .22) !important;
    outline: 3px solid color-mix(in srgb, var(--kk-ui-primary, var(--app-primary, var(--auth-primary, #b20f1b))) 24%, transparent) !important;
    outline-offset: -2px !important;
}

.kk-password-toggle[aria-pressed="true"] {
    background: #f7edef !important;
    background: color-mix(in srgb, var(--kk-ui-primary, var(--app-primary, var(--auth-primary, #b20f1b))) 9%, #ffffff) !important;
    color: var(--kk-ui-primary, var(--app-primary, var(--auth-primary, #8f111c))) !important;
}

.kk-password-toggle svg {
    display: block;
    width: 21px;
    height: 21px;
    pointer-events: none;
}

.kk-password-toggle [data-kk-eye-off] {
    display: none;
}

.kk-password-toggle[aria-pressed="true"] [data-kk-eye-open] {
    display: none;
}

.kk-password-toggle[aria-pressed="true"] [data-kk-eye-off] {
    display: block;
}

/* Fuehrende Symbole (z. B. Schloss im Login) bleiben in ihrer eigenen Spalte. */
.kk-ui-leading-control > .kk-password-field {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
}

.kk-ui-leading-control > .kk-password-field > input.kk-ui-leading-field {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 100% !important;
}

/* Verdeckte vierstellige PINs bleiben trotz des rechten Schalters optisch mittig. */
.kk-password-field > input[inputmode="numeric"] {
    padding-inline-start: 54px !important;
    padding-inline-end: 54px !important;
}

.kk-password-field:has(> input[hidden]) {
    display: none !important;
}

@media (max-width: 600px) {
    .kk-password-toggle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        inset-inline-end: 2px !important;
    }

    .kk-password-field > input {
        padding-inline-end: 55px !important;
    }

    .kk-password-field > input[inputmode="numeric"] {
        padding-inline-start: 55px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kk-password-toggle {
        transition: none !important;
    }
}

@media print {
    .kk-password-toggle {
        display: none !important;
    }
}