@import 'AtcTrainer.Web.Client.3xg93l0f58.bundle.scp.css';

/* /Components/Account/Pages/Manage/PersonalData.razor.rz.scp.css */
.danger-zone[b-sgx0gphsdr] {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 84, 104, 0.4);
    border-radius: var(--radius);
    background: rgba(255, 84, 104, 0.08);
}

.danger-zone-banner[b-sgx0gphsdr] {
    display: inline-block;
    margin-bottom: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--critical);
    color: #1a0508;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.danger-zone-actions[b-sgx0gphsdr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

/* Closed, a <details> box is exactly its <summary>'s size — sits compactly
   next to the Download button. [open] forces it to claim the full row
   (flex-wrap turns that into "start a new line") so the confirmation form
   below gets real width instead of being squeezed beside Download. */
.danger-zone-reveal summary[b-sgx0gphsdr] {
    list-style: none;
    cursor: pointer;
}

.danger-zone-reveal summary[b-sgx0gphsdr]::-webkit-details-marker {
    display: none;
}

.danger-zone-reveal[open][b-sgx0gphsdr] {
    flex-basis: 100%;
}

.danger-zone-confirm[b-sgx0gphsdr] {
    margin-top: 18px;
    padding-top: 16px;
    max-width: 480px;
    border-top: 1px solid rgba(255, 84, 104, 0.3);
}

.danger-zone-confirm .form-label[b-sgx0gphsdr] {
    color: var(--text);
}

.danger-zone-confirm-actions[b-sgx0gphsdr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.danger-zone-confirm .btn-danger:disabled[b-sgx0gphsdr] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* ---------- My Account (Identity "Manage" area) ----------
   These pages are ASP.NET Core Identity's scaffolded Razor components —
   they ship with Bootstrap classes baked in, but this app never loads
   Bootstrap (see app.css's auth-* rules for the pages that already got a
   custom pass). Rather than rewrite 13+ scaffolded pages' markup
   (security-sensitive flows: 2FA, passkeys, recovery codes — not worth the
   risk for a visual pass), this gives their existing Bootstrap vocabulary a
   real look instead of the unstyled/default-browser one it was silently
   falling back to.

   Scoped here (not app.css) deliberately: plenty of this app's own pages
   already use identical Bootstrap-style class names themselves (row, mb-3,
   w-100, form-label, col-md-4, btn-lg...) — currently inert everywhere else
   since nothing ever styled them, but a global rule would have started
   styling all of *those* too. ::deep reaches into whatever @Body renders
   (i.e. the actual active Manage/*.razor page) without leaking anywhere
   else in the app, since ManageLayout is only ever used by this section. */

.account-shell[b-rckmcoc8qg] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}

.account-sidebar[b-rckmcoc8qg] {
    position: sticky;
    top: 16px;
}

.account-content[b-rckmcoc8qg] {
    min-width: 0;
}

.account-content[b-rckmcoc8qg]  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
}

.account-content[b-rckmcoc8qg]  [class*="col-"] {
    min-width: 0;
}

.account-content[b-rckmcoc8qg]  .col-lg-3 { flex: 0 0 220px; }
.account-content[b-rckmcoc8qg]  .col-lg-9 { flex: 1 1 auto; }
.account-content[b-rckmcoc8qg]  .col-xl-6 { flex: 1 1 380px; max-width: 480px; }
.account-content[b-rckmcoc8qg]  .col-md-12 { flex: 1 1 100%; }
.account-content[b-rckmcoc8qg]  .col-md-6 { flex: 1 1 260px; }
.account-content[b-rckmcoc8qg]  .col-md-4 { flex: 1 1 180px; }

/* form-floating ships label-after-input in the DOM (Bootstrap positions the
   label absolutely on top of the input via CSS); column-reverse flips that
   back to this app's normal label-above-input reading order for free, with
   zero markup changes to the scaffolded pages. */
.account-content[b-rckmcoc8qg]  .form-floating {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 14px;
}

.account-content[b-rckmcoc8qg]  .form-floating label {
    margin-bottom: 5px;
}

.account-content[b-rckmcoc8qg]  .form-label,
.account-content[b-rckmcoc8qg]  .control-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.account-content[b-rckmcoc8qg]  .form-text {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 5px;
}

.account-content[b-rckmcoc8qg]  .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.account-content[b-rckmcoc8qg]  .form-check-input {
    width: auto;
}

.account-content[b-rckmcoc8qg]  .form-check-label {
    color: var(--text);
    font-size: 13.5px;
}

/* Legacy Bootstrap 3-era markup a couple of the older scaffolded pages
   still carry (ExternalLogins, EnableAuthenticator). */
.account-content[b-rckmcoc8qg]  .checkbox {
    margin-bottom: 10px;
}

.account-content[b-rckmcoc8qg]  .checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: var(--text);
}

.account-content[b-rckmcoc8qg]  .card-body {
    padding: 4px;
}

.account-content[b-rckmcoc8qg]  .card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}

.account-content[b-rckmcoc8qg]  .card-text {
    color: var(--text-muted);
    font-size: 13.5px;
    margin: 0 0 14px;
}

.account-content[b-rckmcoc8qg]  .btn-lg {
    padding: 11px 18px;
    font-size: 14.5px;
}

.account-content[b-rckmcoc8qg]  .btn-secondary {
    background: var(--surface-3);
}

.account-content[b-rckmcoc8qg]  .btn-link {
    background: transparent;
    border: none;
    color: var(--accent);
    padding: 0;
    text-decoration: underline;
}

.account-content[b-rckmcoc8qg]  .btn-link:hover {
    border-color: transparent;
    color: var(--accent-strong);
}

.account-content[b-rckmcoc8qg]  .alert-info {
    background: rgba(63, 208, 224, 0.1);
    border-color: rgba(63, 208, 224, 0.35);
    color: var(--accent-strong);
}

.account-content[b-rckmcoc8qg]  .alert-warning {
    background: rgba(245, 166, 35, 0.12);
    border-color: rgba(245, 166, 35, 0.4);
    color: var(--warning);
}

.account-content[b-rckmcoc8qg]  .text-info { color: var(--accent-strong); }
.account-content[b-rckmcoc8qg]  .text-success { color: var(--success); }

.account-content[b-rckmcoc8qg]  .input-group {
    display: flex;
    align-items: stretch;
}

.account-content[b-rckmcoc8qg]  .input-group .form-control {
    flex: 1 1 auto;
}

.account-content[b-rckmcoc8qg]  .input-group-append {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
    background: var(--surface-2);
}

.account-content[b-rckmcoc8qg]  .input-group-text {
    color: var(--success);
    font-weight: 700;
}

.account-content[b-rckmcoc8qg]  .recovery-code {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.04em;
}

.account-content[b-rckmcoc8qg]  .mb-3 { margin-bottom: 14px; }
.account-content[b-rckmcoc8qg]  .mt-3 { margin-top: 14px; }
.account-content[b-rckmcoc8qg]  .w-100 { width: 100%; }
.account-content[b-rckmcoc8qg]  .h-100 { height: 100%; }
.account-content[b-rckmcoc8qg]  .font-weight-bold { font-weight: 700; }

/* GenerateRecoveryCodes' scaffolded warning icon — no icon font is loaded,
   so this swaps in a plain glyph instead of leaving an empty, invisible span. */
.account-content[b-rckmcoc8qg]  .glyphicon-warning-sign::before {
    content: "\26A0\FE0F  ";
}

@media (max-width: 720px) {
    .account-shell[b-rckmcoc8qg] {
        grid-template-columns: 1fr;
    }

    .account-sidebar[b-rckmcoc8qg] {
        position: static;
    }
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
.account-nav-group + .account-nav-group[b-dsi1j1blcz] {
    margin-top: 20px;
}

.account-nav-group-title[b-dsi1j1blcz] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 6px 4px;
}

.account-nav-group[b-dsi1j1blcz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* YouTube-style settings nav: plain text at rest (no chip/background), a
   fully-rounded pill only for the active page, links indented further right
   than their group's title above them.

   ::deep is required here, not optional: NavLink is a framework component
   (Microsoft.AspNetCore.Components.Web), not part of this project, so the
   scope attribute Blazor's CSS isolation relies on never reaches the <a>
   it renders unless the selector explicitly reaches through the component
   boundary. MainLayout.razor.css's ".main-nav ::deep a" is the exact same
   situation, already solved the same way — this file just hadn't followed
   it, which is why these links were rendering with zero scoped styling at
   all (falling through to app.css's global `a` rule) rather than merely
   looking different than intended. */
.account-nav-group[b-dsi1j1blcz]  .account-nav-link {
    display: block;
    margin-left: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
}

.account-nav-group[b-dsi1j1blcz]  .account-nav-link:hover {
    background: var(--surface-2);
}

.account-nav-group[b-dsi1j1blcz]  .account-nav-link.active {
    background: var(--surface-3);
    color: var(--accent-strong);
    font-weight: 600;
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-66h7vtbdrp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(63, 208, 224, 0.10) 0%, transparent 45%),
        repeating-linear-gradient(0deg, rgba(63, 208, 224, 0.05) 0, rgba(63, 208, 224, 0.05) 1px, transparent 1px, transparent 48px),
        repeating-linear-gradient(90deg, rgba(63, 208, 224, 0.05) 0, rgba(63, 208, 224, 0.05) 1px, transparent 1px, transparent 48px),
        var(--bg);
}

/* A faint sweeping radar arm behind the card — purely decorative, ties the
   auth screen to the radar-scope subject the rest of the app is built
   around, instead of a generic stock-photo background.

   The bright edge sits at the 100%/0% seam, with the fade ramping *up* to
   it over the preceding 22% rather than ramping *down* away from it — since
   the animation spins the whole gradient clockwise, that puts the fade
   immediately counter-clockwise of the bright edge, i.e. trailing behind
   it (where the beam just was), not leading ahead of it (where it hasn't
   swept yet). Getting these two stops in the other order was the earlier
   bug: it put the fade ahead of the line instead of behind it. */
.auth-radar-sweep[b-66h7vtbdrp] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1400px;
    height: 1400px;
    margin: -700px 0 0 -700px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, transparent 78%, rgba(63, 208, 224, 0.14) 100%);
    animation: auth-sweep-b-66h7vtbdrp 10s linear infinite;
    pointer-events: none;
}

@keyframes auth-sweep-b-66h7vtbdrp {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-radar-sweep[b-66h7vtbdrp] {
        animation: none;
    }
}

.auth-brand[b-66h7vtbdrp] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 18px;
    color: var(--text) !important;
    text-decoration: none;
}

.auth-brand-mark[b-66h7vtbdrp] {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: block;
}

.auth-card[b-66h7vtbdrp] {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: rgba(18, 26, 34, 0.88);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 32px 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/*
 * Renamed from .auth-footer to .auth-legal: that class name is also used
 * (globally, in app.css) for Login/Register's stacked links list — Blazor
 * CSS isolation only scopes the properties THIS file actually sets, so any
 * property this rule didn't declare (display, flex-direction) fell through
 * to app.css's global .auth-footer rule instead, silently turning this
 * single copyright line into a 7-line vertical stack (one line per text/
 * link/separator fragment). A distinct class name removes the collision
 * outright rather than trying to out-specify the global rule.
 */
.auth-legal[b-66h7vtbdrp] {
    position: relative;
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    max-width: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.auth-legal a[b-66h7vtbdrp] {
    color: var(--accent);
    text-decoration: none;
}

.auth-legal a:hover[b-66h7vtbdrp] {
    text-decoration: underline;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-skpf3x5z34] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar[b-skpf3x5z34] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    height: 54px;
    flex: 0 0 auto;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand[b-skpf3x5z34] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 17px;
    color: var(--text) !important;
    text-decoration: none;
    white-space: nowrap;
}

.brand-mark[b-skpf3x5z34] {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: block;
}

.main-nav[b-skpf3x5z34] {
    display: flex;
    gap: 4px;
}

.main-nav[b-skpf3x5z34]  a {
    display: inline-block;
    padding: 7px 12px;
    border-radius: calc(var(--radius) - 2px);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.main-nav[b-skpf3x5z34]  a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.main-nav[b-skpf3x5z34]  a.active {
    color: var(--on-accent);
    background: var(--accent);
}

.nav-dropdown[b-skpf3x5z34] {
    position: relative;
}

.dropdown-menu[b-skpf3x5z34] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 180px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
    z-index: 20;
}

.nav-dropdown:hover .dropdown-menu[b-skpf3x5z34],
.nav-dropdown:focus-within .dropdown-menu[b-skpf3x5z34] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu[b-skpf3x5z34]  a {
    display: block;
    padding: 7px 10px;
    border-radius: calc(var(--radius) - 3px);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.dropdown-menu[b-skpf3x5z34]  a:hover {
    color: var(--text);
    background: var(--surface-3);
}

.dropdown-menu[b-skpf3x5z34]  a.active {
    color: var(--accent-strong);
    background: transparent;
}

.auth-status[b-skpf3x5z34] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-status form[b-skpf3x5z34] {
    margin: 0;
}

.user-name[b-skpf3x5z34] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
}

/* Click-to-open account menu — <details>/<summary> gives native click-toggle
   disclosure with no interactivity/JS needed, unlike .nav-dropdown above
   (which is deliberately hover-based). */
.account-menu[b-skpf3x5z34] {
    position: relative;
}

.account-menu-trigger[b-skpf3x5z34] {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
    padding: 6px 10px;
    border-radius: var(--radius);
    transition: color 0.12s, background 0.12s;
}

.account-menu-trigger[b-skpf3x5z34]::-webkit-details-marker {
    display: none;
}

.account-menu-trigger:hover[b-skpf3x5z34] {
    color: var(--accent-strong);
    background: var(--surface-2);
}

.account-menu-trigger[b-skpf3x5z34]::after {
    content: ' \25BE';
}

.account-menu-popup[b-skpf3x5z34] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 170px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    z-index: 20;
}

.account-menu-popup a[b-skpf3x5z34] {
    display: block;
    padding: 7px 10px;
    border-radius: calc(var(--radius) - 3px);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}

.account-menu-popup a:hover[b-skpf3x5z34] {
    color: var(--text);
    background: var(--surface-3);
}

.account-menu-popup form[b-skpf3x5z34] {
    margin: 0;
}

.account-menu-logout[b-skpf3x5z34] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--critical);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13.5px;
    padding: 7px 10px;
    border-radius: calc(var(--radius) - 3px);
    cursor: pointer;
}

.account-menu-logout:hover[b-skpf3x5z34] {
    background: rgba(255, 84, 104, 0.12);
}

.account-menu-bmac[b-skpf3x5z34] {
    display: block;
    margin-top: 4px;
    padding: 8px 10px 7px;
    border-top: 1px solid var(--border);
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #ffcc33;
    border-radius: calc(var(--radius) - 3px);
}

.account-menu-bmac:hover[b-skpf3x5z34] {
    background: rgba(255, 204, 51, 0.12);
}

.account-menu-version[b-skpf3x5z34] {
    margin-top: 4px;
    padding: 6px 10px 2px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    opacity: 0.7;
    text-align: center;
}

.app-main[b-skpf3x5z34] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px;
}