/* Aussehen des Passkey-Anmeldelayouts aus login-layout.js, fuer Lagom2 (Kunde) und AdminX (Admin).
 *
 * Nicht ableitbar:
 *  - Alle Regeln haengen an Klassen, die NUR login-layout.js setzt (.pk-login usw.).
 *    Ohne JavaScript greift hier nichts, das Originalformular bleibt unberuehrt.
 *  - Dunkelmodus ueber die Klasse der Host-Seite (Lagom: html.lagom-dark-mode,
 *    AdminX: body.style_adminx_11), NICHT ueber prefers-color-scheme: die Seiten
 *    folgen ihrer eigenen Einstellung, nicht der des Systems.
 *  - Eingeklappt wird per max-height/opacity, nie per display/visibility, damit
 *    Passwortmanager das Feld weiter fuellen koennen.
 *  - Jede var() hat einen Fallback: eine undefinierte Variable ohne Fallback macht die
 *    ganze Deklaration ungueltig.
 *  - Kontraste (WCAG AA) gemessen 2026-09-15: Lagom hell Akzent #1062fe auf #fff 5,0:1,
 *    dunkel #6ea8fe auf #242424 6,3:1; AdminX hell #2f55d4 auf #fff 6,1:1,
 *    dunkel #7a9cff auf #1d1d1f 6,6:1; neutrale Rahmen >= 3:1.
 */

/* ---------- Farbwerte je Host ---------- */
.pk-login,
.pk-login-scope {
    --pk-text: var(--text-heading-color, #1c2534);
    --pk-muted: var(--text-body-color, #4b5563);
    --pk-accent: var(--text-primary-color, #1062fe);
    --pk-accent-hover-bg: rgba(16, 98, 254, 0.08);
    --pk-neutral-border: #767b85;
    --pk-neutral-hover-bg: rgba(15, 23, 42, 0.06);
    --pk-icon: #5b6270;
    --pk-focus: var(--text-primary-color, #1062fe);
    --pk-radius: var(--border-radius-base, 6px);
}

html.lagom-dark-mode .pk-login,
html.lagom-dark-mode .pk-login-scope {
    --pk-text: #ffffff;
    --pk-muted: #c9ccd2;
    --pk-accent: #6ea8fe;
    --pk-accent-hover-bg: rgba(110, 168, 254, 0.14);
    --pk-neutral-border: #8d929b;
    --pk-neutral-hover-bg: rgba(255, 255, 255, 0.08);
    --pk-icon: #a3a8b1;
    --pk-focus: #6ea8fe;
}

.pk-login--admin,
.pk-login-scope--admin {
    --pk-text: #1c2534;
    --pk-muted: #4b5563;
    --pk-accent: #2f55d4;
    --pk-accent-hover-bg: rgba(47, 85, 212, 0.08);
    --pk-neutral-border: #6b7280;
    --pk-icon: #6b7280;
    --pk-focus: #2f55d4;
    --pk-radius: 10px;
}

body.style_adminx_11 .pk-login--admin,
body.style_adminx_11 .pk-login-scope--admin {
    --pk-text: #f3f4f6;
    --pk-muted: #c4c7ce;
    --pk-accent: #7a9cff;
    --pk-accent-hover-bg: rgba(122, 156, 255, 0.14);
    --pk-neutral-border: #8d929b;
    --pk-neutral-hover-bg: rgba(255, 255, 255, 0.08);
    --pk-icon: #a3a8b1;
    --pk-focus: #7a9cff;
}

/* ---------- Untertitel ---------- */
.pk-login-subtitle {
    margin: 10px 0 22px;
    text-align: center;
    color: var(--pk-muted, #4b5563);
    font-size: 15px;
    line-height: 1.45;
}

.pk-login-scope--admin.pk-login-subtitle {
    margin: -18px 0 26px;
}

/* ---------- Icons ---------- */
.pk-login .pk-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    line-height: 0;
}

.pk-login .pk-icon svg {
    width: 20px;
    height: 20px;
}

/* Kunde: Personen-Icon links im Anmeldefeld */
.pk-login .pk-field {
    position: relative;
    display: block;
}

.pk-login .pk-field > .pk-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pk-icon, #5b6270);
    pointer-events: none;
    z-index: 2;
}

.pk-login .pk-field > input.form-control {
    padding-left: 44px;
}

/* Admin: AdminX-Icon rechts im Feld, nur Farbe und Groesse */
.pk-login--admin .field-below-label .pk-icon {
    color: var(--pk-icon, #6b7280);
    width: 18px;
    height: 18px;
}

.pk-login--admin .field-below-label .pk-icon svg {
    width: 18px;
    height: 18px;
}

/* ---------- Einklappen (NIE display/visibility, siehe Kopf) ---------- */
.pk-login .pk-collapsible {
    max-height: 40rem;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease, padding 0.3s ease;
}

.pk-login.pk-collapsed .pk-collapsible {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .pk-login .pk-collapsible {
        transition: none;
    }
}

/* Autofill-Erkennung: loest in login-layout.js das Aufklappen aus */
@keyframes pkAutofillStart {
    from { outline-color: transparent; }
    to { outline-color: transparent; }
}

.pk-login input:-webkit-autofill {
    animation-name: pkAutofillStart;
    animation-duration: 1ms;
}

/* ---------- Knopfzeile ----------
   GEAENDERT 2026-09-15c: Beschriftungen bleiben EINZEILIG (Vorgabe Enrico).
   Mechanik, nicht ableitbar: flex: 1 1 0 + min-width: max-content. Der Zeilenumbruch
   der Flexzeile rechnet mit der einzeiligen Textbreite; passen beide Knoepfe nicht
   nebeneinander (schmale Karte, lange Texte in anderer Sprache), rutscht der zweite
   in eine eigene Zeile und beide werden volle Breite. Nebeneinander verteilt flex-grow
   den Rest gleichmaessig. Bewusst KEINE Container Query: deren fester Schwellwert
   passt nicht zu je Sprache unterschiedlich langen Texten; so entscheidet die echte
   Textbreite. Kein Ellipsis, kein Umbruch im Knopf. */
.pk-login .pk-login-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin: 4px 0 0;
    clear: both;
}

.pk-login .pk-login-actions > .btn,
.pk-login .pk-login-providers > .btn {
    flex: 1 1 0;
    width: auto;
    min-width: max-content;
    min-height: 48px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1.25;
    text-align: center;
    border-radius: var(--pk-radius, 6px);
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
}

.pk-login .pk-login-actions > .btn .pk-icon,
.pk-login .pk-login-actions > .btn .pk-icon svg {
    width: 18px;
    height: 18px;
}

/* AdminX setzt height:50px auf den Absendeknopf. height:auto + min-height, damit beide
   Knoepfe per align-items: stretch gleich hoch sind (auch aufgeklappt "Login"). */
.pk-login--admin .pk-login-actions > .btn,
.pk-login--admin .pk-login-actions > input.btn.btn-block {
    height: auto;
    min-height: 50px;
    padding: 8px 10px;
    font-size: 14px;
}

/* "Login mit Passwort", eingeklappt: neutral. Selektor bewusst spezifisch, damit er
   AdminX (.style_adminx_11 .button-login-adminx input.btn.btn-primary.btn-block) und
   die Lagom-Primaerfarbe schlaegt. */
form.pk-login.pk-collapsed .pk-login-actions .btn.pk-btn-password[type] {
    background: transparent;
    background-color: transparent;
    color: var(--pk-text, #1c2534);
    border: 1px solid var(--pk-neutral-border, #767b85);
    box-shadow: none;
    font-weight: 600;
}

form.pk-login.pk-collapsed .pk-login-actions .btn.pk-btn-password[type]:hover {
    background-color: var(--pk-neutral-hover-bg, rgba(15, 23, 42, 0.06));
    color: var(--pk-text, #1c2534);
}

form.pk-login.pk-expanded .pk-btn-password .pk-icon {
    display: none;
}

/* input[type=submit] (AdminX) kann kein Icon enthalten: Schluessel als Hintergrund */
form.pk-login.pk-collapsed .pk-login-actions .btn.pk-btn-password.pk-btn-input[type] {
    padding-left: 34px;
    padding-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%231c2534' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 20 3'/%3E%3Cpath d='m16.5 6.5 3 3'/%3E%3Cpath d='m13.8 9.2 2 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 18px 18px;
}

body.style_adminx_11 form.pk-login.pk-collapsed .pk-login-actions .btn.pk-btn-password.pk-btn-input[type] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%23f3f4f6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 20 3'/%3E%3Cpath d='m16.5 6.5 3 3'/%3E%3Cpath d='m13.8 9.2 2 2'/%3E%3C/svg%3E");
}

/* "Mit Passkey anmelden": primaer umrandet */
.pk-login .pk-login-actions .btn.pk-btn-passkey,
.pk-login .pk-login-actions .btn.pk-btn-passkey:focus {
    background: transparent;
    color: var(--pk-accent, #1062fe);
    border: 2px solid var(--pk-accent, #1062fe);
    box-shadow: none;
    font-weight: 600;
}

.pk-login .pk-login-actions .btn.pk-btn-passkey:hover,
.pk-login .pk-login-actions .btn.pk-btn-passkey:active {
    background: var(--pk-accent-hover-bg, rgba(16, 98, 254, 0.08));
    color: var(--pk-accent, #1062fe);
    border-color: var(--pk-accent, #1062fe);
}

.pk-login .pk-login-actions .btn.pk-btn-passkey[disabled],
.pk-login .pk-login-actions .btn.pk-btn-passkey[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}

/* Fokusring fuer alle eigenen Bedienelemente */
.pk-login .pk-login-actions .btn:focus-visible,
.pk-login .pk-login-providers .btn:focus-visible,
.pk-login .pk-bc-toggle:focus-visible,
.pk-login .pk-bc-form .btn:focus-visible {
    outline: 3px solid var(--pk-focus, #1062fe);
    outline-offset: 2px;
}

/* Platz fuer weitere Anbieter (z. B. Microsoft), leer unsichtbar */
.pk-login .pk-login-providers {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.pk-login .pk-login-providers:empty {
    display: none;
}

/* ---------- "Mit Microsoft anmelden" (NEU 2026-09-15, Phase 2) ----------
   Microsoft-Markenvorgaben: hell weiss mit Rahmen #8C8C8C und Text #5E5E5E (6,4:1 auf #fff),
   dunkel Flaeche #2F2F2F mit weissem Text (13,6:1). Der Rahmen #8C8C8C bleibt im Dunkeln
   stehen, sonst verschwimmt die Knopfkante mit dem Kartenhintergrund (>= 3:1 gegen #242424
   und #1d1d1f). Schrift Segoe UI mit Systemschrift als Rueckfall. Volle Zeilenbreite unter
   den beiden Hauptknoepfen, gleiche Hoehe wie diese. */
.pk-login .pk-login-providers > .btn.pk-btn-microsoft,
.pk-login .pk-login-providers > .btn.pk-btn-microsoft:focus,
.pk-login .pk-login-providers > .btn.pk-btn-microsoft:visited {
    flex: 1 1 100%;
    background: #ffffff;
    color: #5e5e5e;
    border: 1px solid #8c8c8c;
    box-shadow: none;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    gap: 12px;
    text-decoration: none;
}

.pk-login .pk-login-providers > .btn.pk-btn-microsoft:hover,
.pk-login .pk-login-providers > .btn.pk-btn-microsoft:active {
    background: #f3f3f3;
    color: #5e5e5e;
    border-color: #8c8c8c;
    text-decoration: none;
}

html.lagom-dark-mode .pk-login .pk-login-providers > .btn.pk-btn-microsoft,
html.lagom-dark-mode .pk-login .pk-login-providers > .btn.pk-btn-microsoft:focus,
html.lagom-dark-mode .pk-login .pk-login-providers > .btn.pk-btn-microsoft:visited,
body.style_adminx_11 .pk-login .pk-login-providers > .btn.pk-btn-microsoft,
body.style_adminx_11 .pk-login .pk-login-providers > .btn.pk-btn-microsoft:focus,
body.style_adminx_11 .pk-login .pk-login-providers > .btn.pk-btn-microsoft:visited {
    background: #2f2f2f;
    color: #ffffff;
    border-color: #8c8c8c;
}

html.lagom-dark-mode .pk-login .pk-login-providers > .btn.pk-btn-microsoft:hover,
body.style_adminx_11 .pk-login .pk-login-providers > .btn.pk-btn-microsoft:hover {
    background: #3b3b3b;
    color: #ffffff;
}

.pk-login .pk-login-providers > .btn.pk-btn-microsoft .pk-icon,
.pk-login .pk-login-providers > .btn.pk-btn-microsoft .pk-icon svg {
    width: 20px;
    height: 20px;
}

/* Admin: gleiche Hoehe wie die AdminX-Knoepfe darueber (min-height 50px). */
.pk-login--admin .pk-login-providers > .btn.pk-btn-microsoft {
    min-height: 50px;
    height: auto;
    padding: 8px 10px;
}

.pk-login--admin .pk-login-providers {
    margin-top: 10px;
}

/* Schmal: Spaltenrichtung (siehe unten), dann darf flex-basis 100% nicht die Hoehe meinen. */
@media (max-width: 400px) {
    .pk-login .pk-login-providers > .btn.pk-btn-microsoft {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        white-space: normal;
    }
}

/* ---------- Backup-Code ---------- */
.pk-login .pk-bc {
    margin-top: 10px;
    text-align: center;
    clear: both;
}

.pk-login .pk-bc-toggle {
    background: none;
    border: 0;
    min-height: 44px;
    padding: 10px 6px;
    color: var(--pk-accent, #1062fe);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pk-login .pk-bc-form {
    margin-top: 6px;
    text-align: left;
}

/* Eigene display-Regeln schlagen das hidden-Attribut, deshalb ausdruecklich */
.pk-login .pk-bc-form[hidden] {
    display: none !important;
}

.pk-login .pk-bc-form > * + * {
    margin-top: 8px;
}

.pk-login .pk-bc-form .btn {
    display: block;
    width: 100%;
    min-height: 44px;
    background: transparent;
    color: var(--pk-text, #1c2534);
    border: 1px solid var(--pk-neutral-border, #767b85);
    border-radius: var(--pk-radius, 6px);
    font-weight: 600;
}

/* ---------- Schmale Bildschirme: Knoepfe untereinander ---------- */
@media (max-width: 400px) {
    .pk-login .pk-login-actions,
    .pk-login .pk-login-providers {
        flex-direction: column;
    }

    /* Letzte Rueckfallebene: sehr schmal UND sehr langer Text darf umbrechen statt
       aus dem Bildschirm zu ragen. */
    .pk-login .pk-login-actions > .btn,
    .pk-login .pk-login-providers > .btn {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        white-space: normal;
    }
}

/* ---------- Hinweiskasten #pk-auth-notice (webauthn.js) ----------
   Steht vor dem Formular, also ausserhalb von .pk-login. AdminX faerbt .alert im
   Dunkelmodus nicht um; Bootstrap-Blau auf dunklem Grund faellt unter AA. */
body.style_adminx_11 #pk-auth-notice {
    background: #26262b;
    border: 1px solid #3a3a42;
    color: #e5e7eb;
}

body.style_adminx_11 #pk-auth-notice a {
    color: #7a9cff;
}

html.lagom-dark-mode #pk-auth-notice {
    color: #e3ecff;
}

html.lagom-dark-mode #pk-auth-notice a {
    color: #9cc3ff;
}

/* NEU 2026-09-15 (Nachtrag B): Hinweis unter dem Admin-Benutzernamen (Passwort nur mit Benutzername,
   Passkey auch mit E-Mail). Kontrast ueber --pk-muted: hell #4b5563 auf #fff 7,6:1, dunkel #c4c7ce auf #1d1d1f. */
.pk-field-hint {
    margin: 6px 2px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pk-muted, #4b5563);
    text-align: left;
}