/* AnyTalk identity v2 — the classic server-rendered pages.

   Two families share this file: the nine administration pages, and everything under /Account
   (sign-in, the identity flows, and account management). Both were built the same way — a
   light Bootstrap page with a little CSS of its own — and both turn dark together here, so the
   four names the rebrand repaints are declared once rather than in each page's stylesheet.

   Scoped to .at-page-v2, which an administration page carries on its own root and an Account
   page inherits from AccountLayout's wrapper. Linking this file globally repaints nothing on
   its own.

   The Bootstrap rules below are a floor, not an override: they sit earlier in the cascade than
   AnyTalkWeb.styles.css, so a page's own scoped rule still wins at equal specificity. They
   exist because .btn-outline-secondary and friends are drawn for a white page, and only some
   of these pages restate them. */

.at-page-v2 {
    /* --pg-page is the gradient itself, not a flat colour: every page sheet sets a background
       on its own root, and a scoped rule outranks the one below, so a flat token here would be
       painted over on all nine pages and the wash would never appear. */
    --pg-page:
        radial-gradient(90% 55% at 12% 0%, rgba(49, 225, 208, 0.06), transparent 60%),
        radial-gradient(85% 55% at 88% 100%, rgba(49, 168, 255, 0.05), transparent 62%),
        linear-gradient(180deg, var(--at-chrome) 0%, var(--at-midnight) 62%);
    --pg-panel: var(--at-panel-gradient);
    --pg-hairline: rgba(129, 174, 183, 0.20);
    --pg-hairline-strong: rgba(129, 174, 183, 0.32);

    background: var(--pg-page);
    color: var(--at-text-primary);
}

/* Primary actions are the one filled brand shape on these pages. The label inverts with the
   fill: mint is a light colour and Bootstrap sets this text to white.

   The fill lives here rather than in each page's own stylesheet because most of the identity
   flows — forgotten password, lockout, e-mail confirmation — link no stylesheet of their own
   and would otherwise keep Bootstrap's blue under a near-black label. */
.at-page-v2 .btn-primary,
.at-page-v2 .btn-dark {
    background-color: var(--at-brand-mint);
    border-color: var(--at-brand-mint);
    color: #02080C;
    font-weight: 600;
}

    .at-page-v2 .btn-primary:hover,
    .at-page-v2 .btn-primary:focus,
    .at-page-v2 .btn-dark:hover,
    .at-page-v2 .btn-dark:focus {
        background-color: var(--at-brand-bright);
        border-color: var(--at-brand-bright);
        color: #02080C;
    }

.at-page-v2 .btn-secondary {
    background-color: rgba(21, 35, 45, 0.72);
    border-color: var(--pg-hairline);
    color: var(--at-text-primary);
}

    .at-page-v2 .btn-secondary:hover,
    .at-page-v2 .btn-secondary:focus {
        background-color: rgba(30, 49, 59, 0.94);
        border-color: rgba(49, 225, 208, 0.48);
        color: var(--at-text-primary);
    }

.at-page-v2 .btn-outline-secondary {
    background: transparent;
    border-color: var(--pg-hairline);
    color: var(--at-text-secondary);
}

    .at-page-v2 .btn-outline-secondary:hover,
    .at-page-v2 .btn-outline-secondary:focus {
        background: rgba(21, 35, 45, 0.62);
        border-color: rgba(49, 225, 208, 0.48);
        color: var(--at-text-primary);
    }

.at-page-v2 .btn-danger {
    background-color: var(--at-danger);
    border-color: var(--at-danger);
    color: #2A070C;
}

.at-page-v2 .btn-outline-danger {
    background: transparent;
    border-color: rgba(255, 107, 126, 0.55);
    color: var(--at-danger);
}

    .at-page-v2 .btn-outline-danger:hover,
    .at-page-v2 .btn-outline-danger:focus {
        background: rgba(255, 107, 126, 0.14);
        color: #FF9BA8;
    }

.at-page-v2 .form-control,
.at-page-v2 .form-select {
    background-color: rgba(7, 17, 23, 0.76);
    border-color: var(--pg-hairline);
    color: var(--at-text-primary);
}

    .at-page-v2 .form-control::placeholder {
        color: var(--at-text-subtle);
    }

    .at-page-v2 .form-control:focus,
    .at-page-v2 .form-select:focus {
        background-color: rgba(7, 17, 23, 0.92);
        border-color: var(--at-brand-mint);
        box-shadow: var(--at-focus-ring);
        color: var(--at-text-primary);
    }

    /* The native picker draws its own swatch; only the frame around it is ours. */
    .at-page-v2 .form-control-color {
        background-color: rgba(7, 17, 23, 0.76);
        border-color: var(--pg-hairline);
    }

    /* A <select>'s options are painted by the platform, which does not inherit the field's
       colours on Windows — they have to be set on the option itself. */
    .at-page-v2 .form-select option {
        background-color: var(--at-surface);
        color: var(--at-text-primary);
    }

.at-page-v2 .form-label {
    color: var(--at-text-primary);
}

.at-page-v2 .form-text {
    color: var(--at-text-secondary);
}

.at-page-v2 .text-danger {
    color: var(--at-danger) !important;
}

.at-page-v2 .alert {
    background: rgba(21, 35, 45, 0.62);
    border-color: var(--pg-hairline);
    color: var(--at-text-primary);
}

.at-page-v2 .alert-danger {
    background: rgba(255, 107, 126, 0.14);
    border-color: rgba(255, 107, 126, 0.42);
    color: #FF9BA8;
}

.at-page-v2 .alert-success {
    background: rgba(66, 223, 145, 0.14);
    border-color: rgba(66, 223, 145, 0.42);
    color: #A9F0CB;
}

.at-page-v2 .alert-warning {
    background: rgba(250, 204, 21, 0.14);
    border-color: rgba(250, 204, 21, 0.42);
    color: #FFD9A3;
}

.at-page-v2 .alert-info {
    background: rgba(49, 168, 255, 0.12);
    border-color: rgba(49, 168, 255, 0.42);
    color: #A9D8FF;
}

/* ------------------------------------------------- administration record cards */

/* One card per record on the administration directories. They replace wide tables whose name and
   email columns got whatever width a row of nowrap figures and buttons left over, and wrapped one
   character per line. In a card the identifying text shares a wrapping row with its side content,
   so that content drops beneath a name that needs the width instead of squeezing it. Pages keep
   their own pills and avatars; only the card frame and its layout are declared here, once. */
.at-page-v2 .record-list {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 18px;
}

.at-page-v2 .record-card {
    background: rgba(21, 35, 45, 0.30);
    border: 1px solid var(--pg-hairline);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    transition: border-color .15s ease;
}

    .at-page-v2 .record-card:hover,
    .at-page-v2 .record-card:focus-within {
        border-color: rgba(49, 225, 208, 0.35);
    }

.at-page-v2 .record-identity {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr);
}

.at-page-v2 .record-avatar {
    align-items: center;
    background: rgba(49, 225, 208, 0.12);
    border: 1px solid rgba(49, 225, 208, 0.38);
    border-radius: 50%;
    color: var(--at-brand-mint);
    display: inline-flex;
    font-weight: 700;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.at-page-v2 .record-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    min-width: 0;
}

.at-page-v2 .record-title {
    flex: 1 1 auto;
    min-width: 0;
}

.at-page-v2 .record-name {
    color: var(--at-text-primary);
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* An email's local part and "@domain" wrap as whole units; one only breaks inside itself when it
   is wider than the card on its own. */
.at-page-v2 .name-part {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.at-page-v2 .record-subtitle {
    color: var(--at-text-subtle);
    display: block;
    font-size: .84rem;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.at-page-v2 .record-aside {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.at-page-v2 .record-figure {
    text-align: right;
}

    .at-page-v2 .record-figure span {
        color: var(--at-text-secondary);
        display: block;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .at-page-v2 .record-figure strong {
        color: var(--at-text-primary);
        display: block;
        font-size: 1.25rem;
        font-variant-numeric: tabular-nums;
        line-height: 1.2;
    }

.at-page-v2 .record-stats {
    border-top: 1px solid var(--pg-hairline);
    display: grid;
    gap: 12px 20px;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    margin: 0;
    padding-top: 14px;
}

.at-page-v2 .record-stat {
    min-width: 0;
}

    .at-page-v2 .record-stat dt {
        color: var(--at-text-secondary);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .at-page-v2 .record-stat dd {
        color: var(--at-text-primary);
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        margin: 3px 0 0;
        overflow-wrap: anywhere;
    }

.at-page-v2 .stat-detail {
    color: var(--at-text-subtle);
    display: block;
    font-size: .8rem;
    font-weight: 400;
    margin-top: 2px;
}

.at-page-v2 .record-meta {
    align-items: center;
    color: var(--at-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: .86rem;
    gap: 4px 14px;
    min-width: 0;
}

    .at-page-v2 .record-meta > * {
        overflow-wrap: anywhere;
    }

.at-page-v2 .record-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: space-between;
}

.at-page-v2 .record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-left: auto;
}

@media (max-width: 640px) {
    .at-page-v2 .record-list {
        padding: 12px;
    }

    .at-page-v2 .record-card {
        padding: 16px;
    }

    .at-page-v2 .record-identity {
        align-items: start;
    }

    .at-page-v2 .record-aside,
    .at-page-v2 .record-actions {
        margin-left: 0;
    }

    .at-page-v2 .record-figure {
        text-align: left;
    }

    .at-page-v2 .record-actions {
        width: 100%;
    }

        .at-page-v2 .record-actions .btn {
            flex: 1 1 auto;
        }
}

/* ------------------------------------------------- the /Account pages */

/* The wrapper fills the layout's content area so the page wash reaches the edges rather than
   ending under the first paragraph. */
.account-surface {
    min-height: 100%;
    padding: clamp(1rem, 3vw, 2rem);
}

/* Shared shell for the static Identity flows. These pages can be opened while an unrelated
   new-version session is active or from an anonymous legacy document, so the surface must use
   theme tokens instead of forcing Bootstrap's light background under inherited light text. */
.account-flow {
    display: grid;
    margin: 0 auto;
    max-width: 44rem;
    min-height: min(34rem, 70vh);
    place-items: center;
    width: 100%;
}

.account-flow-card {
    background: var(--pg-panel);
    border: 1px solid var(--pg-hairline);
    border-radius: var(--at-radius-lg);
    box-shadow: var(--at-shadow-chrome), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--at-text-primary);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    width: 100%;
}

.account-flow-card h1,
.account-flow-card h2,
.account-flow-card h3 {
    color: var(--at-text-primary);
    letter-spacing: -0.035em;
}

.account-flow-card h1 {
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    margin: 0;
}

/* FocusOnNavigate focuses the page heading for assistive technology. It isn't an interactive
   control, so don't draw the global control ring as a box around the entire title. */
.account-flow-card h1[tabindex="-1"]:focus-visible {
    box-shadow: none;
}

.account-flow-eyebrow {
    color: var(--at-brand-mint);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.account-flow-intro {
    color: var(--at-text-secondary);
    font-size: 1.05rem;
    margin: 0.75rem 0 1.5rem;
}

.account-flow-form {
    display: grid;
    gap: 1rem;
}

.account-flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.account-flow-actions .btn {
    min-width: 10rem;
}

.account-flow-back-link {
    margin: 1.25rem 0 0;
    text-align: center;
}

@media (max-width: 36rem) {
    .account-flow {
        min-height: auto;
    }

    .account-flow-actions,
    .account-flow-actions .btn {
        width: 100%;
    }
}

/* Floating labels sit inside the field, so they take the field's colours, not the page's.
   Bootstrap also paints the resting label with an opaque white pill; on a dark field that
   shows up as a bright bar behind the text. */
.at-page-v2 .form-floating > label {
    color: var(--at-text-subtle);
}

/* Bootstrap's floating-label placeholder must remain invisible. The general themed placeholder
   colour above is intentionally visible for ordinary fields and otherwise paints underneath the
   resting label. */
.at-page-v2 .form-floating > .form-control::placeholder {
    color: transparent;
}

.at-page-v2 .form-floating > .form-control:focus ~ label::after,
.at-page-v2 .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.at-page-v2 .form-floating > .form-select ~ label::after {
    background-color: transparent;
}

.at-page-v2 .form-floating > .form-control:focus ~ label,
.at-page-v2 .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--at-brand-mint);
}

.at-page-v2 .text-muted {
    color: var(--at-text-secondary) !important;
}

.at-page-v2 hr {
    border-color: var(--pg-hairline);
    opacity: 1;
}

.at-page-v2 .table {
    --bs-table-color: var(--at-text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--pg-hairline);
    --bs-table-striped-color: var(--at-text-primary);
    --bs-table-striped-bg: rgba(21, 35, 45, 0.42);
    --bs-table-hover-color: var(--at-text-primary);
    --bs-table-hover-bg: rgba(21, 35, 45, 0.55);
}

/* Links inside body copy — the identity flows are mostly prose with one link in the middle. */
.at-page-v2 a:not(.btn):not(.nav-link) {
    color: var(--at-brand-mint);
}

    .at-page-v2 a:not(.btn):not(.nav-link):hover {
        color: var(--at-brand-bright);
    }