/* KOS KLIMA Intranet – zweiter Faktor (Modul "totp")
   Anmeldeschritt für den Code und die Dialoge zum Einrichten. */

/* Anmeldung: Ist der Code-Schritt offen, tritt alles andere zurück. */
#totp-login{display:none;}
body.totp-step #totp-login{display:block;}
body.totp-step #local-login,
body.totp-step .ms-btn,
body.totp-step #login-local-toggle{display:none !important;}
.totp-hint{font-size:13px;color:var(--gray-600);margin:0 0 14px;line-height:1.5;}
.totp-back{display:block;width:100%;margin-top:14px;padding:6px;background:none;border:none;color:var(--gray-500);font-family:var(--font-body);font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.totp-back:hover{color:var(--navy);}
#login-totp,.totp-code-input{font-family:var(--font-body);font-size:22px;letter-spacing:6px;text-align:center;font-variant-numeric:tabular-nums;}

/* Einrichtungsdialog */
.totp-intro{font-size:13px;color:var(--gray-600);line-height:1.5;margin:0 0 14px;}
.totp-setup{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px;}
.totp-qr{flex:0 0 172px;width:172px;height:172px;border:1px solid var(--gray-200);border-radius:var(--radius-input);padding:6px;background:#fff;}
.totp-qr svg{display:block;width:100%;height:100%;}
.totp-manual{flex:1;min-width:0;}
.totp-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500);margin-bottom:6px;}
.totp-secret{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;letter-spacing:1px;line-height:1.6;word-break:break-all;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-input);padding:8px 10px;color:var(--gray-800);user-select:all;}
.totp-meta{font-size:11.5px;color:var(--gray-500);margin-top:8px;line-height:1.5;}
.totp-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0;}
.totp-codes code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;letter-spacing:1px;text-align:center;padding:8px 6px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-input);user-select:all;}
.totp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.chip.chip-warning{background:#fdf3dc;color:#8a5a00;}
@media (max-width:560px){
  .totp-setup{flex-direction:column;}
  .totp-qr{flex-basis:auto;width:200px;height:200px;margin:0 auto;}
}