/* ============================================================================
   PYCIE Auth-Seiten (Login, Kunden-Login, Registrierung, Passwort vergessen)
   — Mobile-Schicht
   ----------------------------------------------------------------------------
   WARUM DIESE DATEI IN public/ LIEGT UND AM ENDE VON <body> VERLINKT WIRD

   Die Regeln standen zuerst in den <style>-Bloecken der vier Seiten, im Quell-
   text NACH dem <link> auf dashboard.css — dort gewannen sie korrekt, und im
   Dev-Server sah alles richtig aus. Im Build kehrt Vite die Reihenfolge um: es
   zieht die gebuendelten Stylesheets ans ENDE des <head>, also HINTER den
   Inline-Style. Damit gewann wieder dashboard.css:

       .password-toggle-btn { padding: 4px }      (dashboard.css, gebuendelt)
       .password-toggle-btn { padding: 0.75rem }  (Inline-Style, verliert)

   Gemessen im Build bei 375x812: das Tap-Ziel des Auge-Knopfes blieb 27x27px
   statt 44x44px. Gleiche Spezifitaet, spaeter geladen gewinnt — die Korrektur
   war still wirkungslos.

   Aus public/ kopiert Vite die Datei unveraendert nach dist/auth-mobile.css und
   laesst den <link> stehen, wo er steht: als letztes Element vor </body>. Damit
   laedt sie nach allen gebuendelten Stylesheets und gewinnt zuverlaessig.
   Dasselbe Muster tragen portal-mobile.css, callcenter-mobile.css und
   dashboard-mobile.css — wer eine davon zurueck nach src/css/ schiebt, macht
   die Mobilfassung still kaputt.

   Pruefung nach jedem Build:
     grep -n 'auth-mobile' dist/login.html   -> muss NACH </head> stehen
   ========================================================================== */


/* ===========================================================================
   TAP-ZIELE — alles unter 44px ist auf dem Telefon ein Fehlversuch
   ========================================================================= */
@media (pointer: coarse) {

    /* Der Auge-Knopf war ~28x28px. Groesse explizit statt ueber Polster
       gerechnet: mit padding:0.75rem kam je nach Symbolgroesse 42px heraus —
       zwei Pixel unter dem Minimum, und das faellt beim Tippen auf. */
    .password-toggle-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        right: 0.25rem;
    }

    /* Mehr Platz rechts, damit langer Passworttext nicht unter das nun
       groessere Auge-Symbol laeuft. */
    .password-wrapper .form-input {
        padding-right: 3.25rem;
    }

    /* Fusszeilen-Links ("Passwort vergessen?", "Registrieren", "Anmelden",
       "Zurueck zum Login") von ~17px auf 44px Tap-Hoehe heben. Das negative
       Margin gleicht das Polster aus, damit sich das Layout nicht verschiebt.

       Anker, die als Knopf auftreten (.login-btn), sind ausgenommen: sie
       bringen ihre Groesse aus dashboard.css selbst mit. Der Ausschluss per
       :not() ist Absicht — ein Zuruecksetzen mit `padding: revert` faellt auf
       den Browser-Standard (0) zurueck, NICHT auf die Regel aus dashboard.css,
       und liess den "Zum Login"-Knopf auf 27px zusammenfallen. */
    .login-card a:not(.login-btn),
    .login-link a:not(.login-btn) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 0.4rem;
        margin: -0.4rem 0;
    }

    /* Ohne Unterstreichung ist der graue "Passwort vergessen?"-Link auf dem
       Telefon kaum als Link zu erkennen. Desktop bleibt unveraendert. */
    .forgot-link {
        text-decoration: underline;
    }

    /* Der Resend-Textknopf der Registrierung war ~14px hoch und sitzt direkt
       unter "Verifizieren" — ein Fehltipp loeste verifyCode() mit
       unvollstaendigem Code aus und leerte die Felder. */
    .resend-link button {
        padding: 0.75rem 1rem;
        min-height: 44px;
        font-size: var(--text-sm);
    }
    .resend-link {
        margin-top: 0.5rem;
    }
}


/* ===========================================================================
   KLEBRIGE HOVER-ZUSTAENDE
   ---------------------------------------------------------------------------
   Auf Touch matcht :hover nach dem Antippen und bleibt haengen: der
   Login-Knopf sprang 2px hoch und verharrte in Schwebe-Optik.
   ========================================================================= */
@media (hover: none) {

    .login-btn:hover {
        transform: none;
        box-shadow: none;
    }

    .password-toggle-btn:hover {
        color: var(--color-text-muted, #a0a0a0);
        opacity: 0.8;
    }
}


/* ===========================================================================
   PRUEFHARNISCH — in der Konsole bei 375x812 auf jeder der vier Seiten.
   Beide muessen 0 ergeben:

   [...document.querySelectorAll('button,a[href]')]
       .filter(e => e.offsetParent && e.getBoundingClientRect().height > 0
                 && e.getBoundingClientRect().height < 44).length
   [...document.querySelectorAll('input,textarea,select')]
       .filter(e => parseFloat(getComputedStyle(e).fontSize) < 16).length
   ========================================================================= */
