/* Kravspec — account pages (identity flows + kontoindstillinger).
   Card pattern follows Lockout.razor; everything reads theme tokens so
   dark mode works automatically. ac-* = standalone account cards,
   am-* = the Kontoindstillinger (Manage) area. */

/* ============================
   Standalone account card
   ============================ */

.ac-wrap {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.ac-card {
    max-width: 440px;
    width: 100%;
    background: var(--k-surface);
    border: 1px solid var(--k-line-soft);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-md, 0 8px 24px rgba(15, 30, 58, .08));
    padding: 2.25rem 2rem;
    text-align: center;
}

.ac-card--wide { max-width: 480px; }

.ac-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--k-accent-tint);
    border: 1px solid var(--k-accent-border);
    color: var(--k-accent);
    font-size: 1.4rem;
}

.ac-icon--danger {
    background: var(--k-danger-bg);
    border-color: var(--k-danger-border);
    color: var(--k-danger);
}

.ac-icon--success {
    background: var(--k-success-bg);
    border-color: var(--k-success-border);
    color: var(--k-success);
}

.ac-icon--warning {
    background: var(--k-warning-bg);
    border-color: var(--k-warning-border);
    color: var(--k-warning);
}

.ac-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--k-ink);
    margin: 0 0 .6rem;
}

.ac-text {
    font-size: .9rem;
    color: var(--k-ink-soft);
    line-height: 1.55;
    margin: 0 0 .4rem;
}

.ac-text--muted {
    color: var(--k-muted);
    font-size: .82rem;
}

.ac-actions {
    margin-top: 1.25rem;
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Form section inside a card: fields read left-aligned while the
   icon/title/intro above stay centered. */
.ac-form {
    margin-top: 1.4rem;
    text-align: left;
}

.ac-form .btn[type="submit"],
.ac-form .ac-submit {
    margin-top: 1.25rem;
}

.ac-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    font-size: .88rem;
    color: var(--k-ink-soft);
    cursor: pointer;
}

/* Quiet link line under the card's form or actions. */
.ac-foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--k-line-soft);
    font-size: .84rem;
    color: var(--k-muted);
}

.ac-foot a {
    color: var(--k-accent);
    text-decoration: none;
}

.ac-foot a:hover { text-decoration: underline; }

/* Status banner inside cards (StatusMessage renders Bootstrap alerts;
   this trims them so they sit well in the narrow card). */
.ac-card .alert {
    font-size: .87rem;
    text-align: left;
    margin: 0 0 1rem;
}

/* ============================
   Kontoindstillinger (Manage)
   ============================ */

.am-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

.am-head { margin-bottom: 1.5rem; }

.am-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--k-ink);
    margin: 0 0 .3rem;
}

.am-sub {
    font-size: .9rem;
    color: var(--k-muted);
    margin: 0;
}

.am-grid {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 820px) {
    .am-grid { grid-template-columns: 1fr; }
}

.am-nav {
    list-style: none;
    margin: 0;
    padding: .5rem;
    background: var(--k-surface);
    border: 1px solid var(--k-line-soft);
    border-radius: var(--k-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.am-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: var(--k-radius);
    font-size: .89rem;
    font-weight: 500;
    color: var(--k-ink-soft);
    transition: background var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}

.am-nav .nav-link i {
    font-size: .95rem;
    color: var(--k-muted);
    transition: color var(--k-dur) var(--k-ease);
}

.am-nav .nav-link:hover {
    background: var(--k-fill);
    color: var(--k-ink);
}

.am-nav .nav-link.active {
    background: var(--k-accent-tint);
    color: var(--k-accent-strong);
    font-weight: 600;
}

.am-nav .nav-link.active i { color: var(--k-accent); }

.am-panel {
    background: var(--k-surface);
    border: 1px solid var(--k-line-soft);
    border-radius: var(--k-radius-lg);
    padding: 1.75rem;
}

.am-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--k-ink);
    margin: 0 0 .35rem;
}

.am-panel-sub {
    font-size: .87rem;
    color: var(--k-muted);
    margin: 0 0 1.25rem;
}

.am-panel .alert { font-size: .87rem; }

.am-form { max-width: 460px; }

.am-form .btn[type="submit"] { margin-top: 1.25rem; }

/* Grouped rows for action-style pages (persondata, 2FA overview). */
.am-section + .am-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--k-line-soft);
}

.am-section-title {
    font-size: .95rem;
    font-weight: 650;
    color: var(--k-ink);
    margin: 0 0 .35rem;
}

.am-section-text {
    font-size: .87rem;
    color: var(--k-ink-soft);
    line-height: 1.55;
    margin: 0 0 .75rem;
}

.am-btn-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Callout used instead of raw Bootstrap alerts for warnings the user
   should read before a destructive action. */
.am-callout {
    display: flex;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: var(--k-radius);
    border: 1px solid var(--k-warning-border);
    background: var(--k-warning-bg);
    color: var(--k-ink-soft);
    font-size: .87rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.am-callout > i {
    color: var(--k-warning);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.am-callout--danger {
    border-color: var(--k-danger-border);
    background: var(--k-danger-bg);
}

.am-callout--danger > i { color: var(--k-danger); }

.am-callout p { margin: 0 0 .35rem; }
.am-callout p:last-child { margin-bottom: 0; }

/* Recovery codes grid (shared by the manage flow and 2FA setup). */
.ac-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
    margin: 1rem 0;
}

.ac-codes code {
    display: block;
    padding: .5rem .6rem;
    border-radius: var(--k-radius);
    background: var(--k-fill);
    border: 1px solid var(--k-line-soft);
    color: var(--k-ink);
    font-size: .88rem;
    text-align: center;
    letter-spacing: .04em;
}

/* Numbered steps in the authenticator setup. */
.am-steps {
    list-style: none;
    counter-reset: am-step;
    margin: 0;
    padding: 0;
}

.am-steps > li {
    counter-increment: am-step;
    position: relative;
    padding-left: 2.4rem;
    padding-bottom: 1.5rem;
}

.am-steps > li:last-child { padding-bottom: 0; }

.am-steps > li::before {
    content: counter(am-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--k-accent-tint);
    border: 1px solid var(--k-accent-border);
    color: var(--k-accent-strong);
    font-size: .8rem;
    font-weight: 700;
}

.am-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 30px;
    bottom: 4px;
    width: 2px;
    background: var(--k-line-soft);
}

.am-key {
    display: inline-block;
    padding: .3rem .55rem;
    border-radius: var(--k-radius-sm);
    background: var(--k-fill);
    border: 1px solid var(--k-line-soft);
    color: var(--k-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    letter-spacing: .05em;
}