/* Augensymbol zum Ein- und Ausblenden im Passwortfeld.
 *
 * Gehoert zu /static/js/password-reveal.js — dort steht, warum es das gibt.
 * Bewusst eine eigene Datei: app.css bleibt unberuehrt, damit parallele
 * Arbeiten an der Oberflaeche nicht kollidieren.
 *
 * Design-Standard (/opt/stack/design/DESIGN.md): etabliertes Symbol statt
 * Beschriftung, weil die Bedeutung eindeutig ist; kein zusaetzliches
 * dominantes Element; Farben und Abstaende ausschliesslich aus tokens.css.
 */

.pw-huelle {
  position: relative;
  display: block;
}

/* Platz fuer den Knopf, damit lange Passwoerter nicht darunter laufen. */
.pw-huelle > input {
  width: 100%;
  padding-right: 40px;
}

.pw-auge {
  position: absolute;
  top: 50%;
  right: var(--s2, 8px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-dim, #8A8F98);
  cursor: pointer;
  line-height: 0;
}

.pw-auge:hover {
  color: var(--text, #F7F8F8);
  background: var(--surface-2, #18181B);
}

.pw-auge:focus-visible {
  outline: 2px solid var(--accent, #5E6AD2);
  outline-offset: 1px;
}

/* Browsereigene Augensymbole (Edge, Safari) ausblenden — sonst stehen zwei
   nebeneinander und man weiss nicht, welches gilt. */
.pw-huelle > input::-ms-reveal,
.pw-huelle > input::-ms-clear {
  display: none;
}

.pw-huelle > input::-webkit-textfield-decoration-container {
  padding-right: 0;
}

/* Sichtbare Meldung, wenn der Browser das Absenden selbst abbricht.
   Nutzt die vorhandene Klasse .flash.err aus app.css; hier nur der Abstand
   und das Ausblenden im Leerzustand. */
.pw-meldung:empty {
  display: none;
}

.pw-meldung {
  margin-bottom: var(--s4, 16px);
}