/*
   ============================================================
   DaXPortal — Konto-Verwaltung (Account/Manage)
   Styles für das Account-Manage-Bereich inkl. 2FA und QR-Code.
   ============================================================
*/

/* ── Äußerer Wrapper (DxTabs + Content) ─────────────────────── */
.manage-layout {
    margin-top: .25rem;
}

/* Content-Bereich unter den Tabs */
.manage-page-body {
    padding: 1.5rem 0 0;
}

/* ── Formulare & Blöcke ─────────────────────────────────────── */
.block-content {
    max-width: 480px;
}

/* ── Abschnittstittel (innerhalb der Seite) ─────────────────── */
.title.title-secondary {
    margin: 1.25rem 0 .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--dx-border);
}

.title-content-text-secondary {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dx-text-dark);
}

/* ── Text-Content-Bereiche ──────────────────────────────────── */
.manage-content {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1rem;
    max-width: 600px;
    color: var(--dx-text);
    line-height: 1.6;
}

/* ── Button-Gruppen ─────────────────────────────────────────── */
.button-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 320px;
    margin: .5rem 0;
}

.button-link {
    display: block;
    width: 100%;
}

/* ── 2FA Setup Seite ────────────────────────────────────────── */
.twofactor-content {
    max-width: 700px;
}

.twofactor-content ol.list {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: .75rem 0 1.25rem;
}

.twofactor-content ol.list li {
    line-height: 1.6;
    color: var(--dx-text);
}

.twofactor-content .info-message {
    margin-top: .35rem;
    font-size: .875rem;
    color: var(--dx-text-muted);
    display: none; /* QR-Code wird jetzt direkt angezeigt */
}

/* ── QR-Code ────────────────────────────────────────────────── */
.qr-code-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.25rem;
}

.qr-code-wrapper svg {
    width: 280px;
    height: 280px;
    border: 1px solid var(--dx-border);
    border-radius: var(--dx-radius-sm);
    padding: .75rem;
    background: #fff;
    flex-shrink: 0;
    display: block;
}

.qr-code-key-info {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-top: .25rem;
}

.qr-code-key-info p {
    margin: 0;
    color: var(--dx-text);
    font-size: .9rem;
    line-height: 1.5;
}

.qr-code-key {
    display: inline-block;
    background: var(--dx-bg);
    border: 1px solid var(--dx-border);
    border-radius: var(--dx-radius-sm);
    padding: .4rem .8rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 1rem;
    letter-spacing: .06em;
    color: var(--dx-text-dark);
    user-select: all;
}

/* ── Wiederherstellungscodes ────────────────────────────────── */
.codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .4rem;
    margin: .75rem 0 1rem;
}

.recovery-code {
    font-family: "Courier New", Courier, monospace;
    font-size: .9rem;
    font-weight: 600;
    background: var(--dx-bg);
    border: 1px solid var(--dx-border);
    border-radius: var(--dx-radius-sm);
    padding: .35rem .65rem;
    display: block;
    text-align: center;
    letter-spacing: .05em;
    color: var(--dx-text-dark);
}