/* Identity pages — the static-SSR half of the app.
 *
 * These cannot use MudBlazor (static rendering is unsupported), so they stay on the Bootstrap 5.3
 * markup the template ships. This file THEMES Bootstrap; it does not re-implement it.
 *
 * That distinction is the whole lesson here. The first version of this file restyled .form-control,
 * .btn and .form-floating > label directly, which fought Bootstrap's own rules and broke the Manage
 * page: floating labels are positioned ABSOLUTELY by Bootstrap, so making them display:block
 * dropped them on top of their inputs. Bootstrap 5.3 exposes everything through CSS custom
 * properties, so branding it is a matter of setting variables and leaving the components alone.
 *
 * Dark mode is Bootstrap's own, switched by data-bs-theme on <html> (set in App.razor). Do not add
 * a parallel prefers-color-scheme block here — two mechanisms disagreeing is how you get a light
 * input on a dark card.
 *
 * The palette below mirrors PubStudioThemes.Warm (the Chosen palette since 2026-09-29; Slate before). One is C# read by Blazor, the other is CSS read
 * before any Blazor runs, so there is no shared source: CHANGE BOTH OR NEITHER. The primary colours are
 * test-enforced (UiConsistencyGuardTests.AccountCssMirrorsTheChosenPalette).
 */

:root {
    --ps-primary: #b45309;
    --ps-primary-hover: #92400e;
    --ps-on-primary: #ffffff;
    --ps-radius: 14px;
    --ps-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

    /* Bootstrap's own knobs, so every component it renders inherits the brand. */
    --bs-primary: var(--ps-primary);
    --bs-primary-rgb: 180, 83, 9;
    /* BOTH FORMS, and the -rgb one is the one that works.
       Bootstrap 5.3 resolves link colour as rgba(var(--bs-link-color-rgb), var(--bs-link-opacity)),
       so setting only --bs-link-color changes nothing and links keep Bootstrap's default lavender.
       That is how the "Click here to confirm your account" link on RegisterConfirmation ended up
       indistinguishable from the sentence around it - a link nobody could see they had to click. */
    --bs-link-color: var(--ps-primary);
    --bs-link-color-rgb: 180, 83, 9;
    --bs-link-hover-color: var(--ps-primary-hover);
    --bs-link-hover-color-rgb: 146, 64, 14;
    --bs-body-font-family: var(--ps-font);
    --bs-border-radius: 8px;
}

[data-bs-theme="dark"] {
    --ps-primary: #fbbf24;
    --ps-primary-hover: #f59e0b;
    /* Dark text on the light amber: white on #fbbf24 is ~1.7:1. Matches Warm's PrimaryContrastDark. */
    --ps-on-primary: #1c1917;
    --bs-primary: var(--ps-primary);
    --bs-primary-rgb: 251, 191, 36;
    --bs-link-color: var(--ps-primary);
    --bs-link-color-rgb: 251, 191, 36;
    --bs-link-hover-color: var(--ps-primary-hover);
    --bs-link-hover-color-rgb: 245, 158, 11;

    /* Warm, matching PubStudioThemes.Warm's dark palette rather than Bootstrap's default grey. */
    --bs-body-bg: #0c0a09;
    --bs-body-color: #e7e5e4;
    --bs-secondary-color: #a8a29e;
    --bs-border-color: #292524;
    --bs-emphasis-color: #fafaf9;
}

:root:not([data-bs-theme="dark"]) {
    --bs-body-bg: #faf9f7;
    --bs-body-color: #1c1917;
    --bs-secondary-color: #78716c;
    --bs-border-color: #e7e5e4;
}

/* Buttons: 5.3 builds .btn from --bs-btn-*, so this brands them without touching layout. */
.btn-primary {
    --bs-btn-color: var(--ps-on-primary);
    --bs-btn-hover-color: var(--ps-on-primary);
    --bs-btn-active-color: var(--ps-on-primary);
    --bs-btn-disabled-color: var(--ps-on-primary);
    --bs-btn-bg: var(--ps-primary);
    --bs-btn-border-color: var(--ps-primary);
    --bs-btn-hover-bg: var(--ps-primary-hover);
    --bs-btn-hover-border-color: var(--ps-primary-hover);
    --bs-btn-active-bg: var(--ps-primary-hover);
    --bs-btn-active-border-color: var(--ps-primary-hover);
    --bs-btn-disabled-bg: var(--ps-primary);
    --bs-btn-disabled-border-color: var(--ps-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--ps-primary);
    --bs-btn-border-color: var(--ps-border-color, var(--bs-border-color));
    --bs-btn-hover-bg: var(--ps-primary);
    --bs-btn-hover-color: var(--ps-on-primary);
    --bs-btn-hover-border-color: var(--ps-primary);
    --bs-btn-active-bg: var(--ps-primary-hover);
    --bs-btn-active-color: var(--ps-on-primary);
}

/* ---- the page shell ------------------------------------------------------------------------- */

.ps-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* NOT justify-content: center. A flex item taller than its container overflows in BOTH
       directions when centred, and the part above the top edge cannot be scrolled to - it is simply
       unreachable. Auto margins centre the same way while keeping the overflow scrollable, which
       matters here because these cards grow: Register is much taller than Login. */
    justify-content: flex-start;

    gap: 1rem;
    padding: 2rem 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--ps-font);
}

/* Sign-in, register, reset: a single narrow column, centred. */
.ps-auth__card {
    width: 100%;
    max-width: 26rem;
    margin-block: auto;                 /* centres vertically without clipping - see .ps-auth */
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ps-radius);
    padding: 2rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px rgb(0 0 0 / 6%);
}

/* ---- links must look like links -----------------------------------------------------------------
 *
 * Colour alone is not enough here and was not enough in practice: on RegisterConfirmation the whole
 * sentence is one shade and the only actionable part of the page - the confirmation link - read as
 * ordinary prose. Someone had to be TOLD it was clickable.
 *
 * Underline them. This is the one place in the product where a missed link means a person cannot
 * finish signing up, because there is no mail server and the link is shown inline instead. */

.ps-auth__card a,
.ps-auth__card .btn-link {
    color: var(--ps-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: 500;
}

.ps-auth__card a:hover,
.ps-auth__card .btn-link:hover {
    color: var(--ps-primary-hover);
    text-decoration-thickness: 2px;
}

/* Buttons are anchors on some of these pages; they must not get the underline treatment. */
.ps-auth__card a.btn {
    text-decoration: none;
    font-weight: 500;
}

/* ---- the Identity scaffolding's grid, inside a narrow card --------------------------------------
 *
 * Eight Account pages (Login, Register, ForgotPassword, ResetPassword, the 2fa pages, ExternalLogin,
 * ResendEmailConfirmation) come from the ASP.NET Identity templates, which lay them out as a
 * two-column Bootstrap row: the form beside an "use another service" panel. That assumes a
 * full-width page.
 *
 * Inside a 26rem card those columns collapse to about 12rem each and the result is unreadable -
 * labels wrap mid-word and the two halves interleave. Stack them instead.
 *
 * This THEMES Bootstrap rather than re-implementing it, which is the standing rule for this file:
 * the markup keeps its Bootstrap classes and we override the grid only where the container makes it
 * wrong. Do not "fix" this by editing the eight pages - they are scaffolding, and regenerate. */

.ps-auth__card .row {
    display: block;
    margin: 0;
}

.ps-auth__card .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding-left: 0;
    padding-right: 0;
}

/* A rule between the stacked halves, so "or use another service" reads as a separate choice rather
   than as more of the form. Only when that half HAS content: with no external provider, ExternalLoginPicker
   renders nothing, and an unconditional rule left a stray divider under every Login/Register card (2026-09-29). */
.ps-auth__card .row > [class*="col-"] + [class*="col-"]:has(> *) {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}

/* ---- the signed-in shell ---------------------------------------------------------------------
 * Account management keeps the app's chrome. A signed-in person changing their password should not
 * be dropped onto a bare card with no header and no navigation, which is what the first version of
 * this did. The MudBlazor shell cannot render here (static SSR), so this is a hand-written copy —
 * deliberately plain, and matched to the Mud palette by the variables at the top of this file. */

.ps-auth--app {
    display: block;
    min-height: 100vh;
    padding: 0;
}

.ps-shell__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 64px;                       /* matches MudAppBar, so the two halves line up */
    padding: 0 1.5rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.ps-shell__brand {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-emphasis-color, var(--bs-body-color));
    text-decoration: none;
}

.ps-shell__back { font-size: .875rem; text-decoration: none; }

.ps-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);   /* 260px matches DrawerWidthLeft */
    align-items: start;
    min-height: calc(100vh - 64px);
}

.ps-shell__nav {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    border-right: 1px solid var(--bs-border-color);
    min-height: calc(100vh - 64px);
}

.ps-shell__nav a {
    padding: .625rem 1.5rem;
    font-size: .9375rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.ps-shell__nav a:hover { background: rgb(var(--bs-primary-rgb) / 8%); }

.ps-shell__nav .ps-shell__current {
    color: var(--ps-primary);
    box-shadow: inset 3px 0 0 var(--ps-primary);
    font-weight: 500;
}

.ps-shell__navhead {
    padding: 1rem 1.5rem .25rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
}

.ps-shell__main { padding: 2rem; max-width: 60rem; }

/* One column once the sidebar would crowd the form. */
@media (max-width: 900px) {
    .ps-shell { grid-template-columns: 1fr; }
    .ps-shell__nav {
        flex-direction: row;
        flex-wrap: wrap;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }
    .ps-shell__navhead { display: none; }
    .ps-shell__main { padding: 1.5rem; }
}

.ps-auth__brand {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-emphasis-color, var(--bs-body-color));
    text-decoration: none;
    letter-spacing: -0.01em;
}

.ps-auth__footer {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* Headings only — the template ships an h1 and an h2 stacked, which at Bootstrap's default sizes
   dominate a login card. Nothing else about the form is touched. */
.ps-auth h1 { font-size: 1.375rem; font-weight: 600; margin: 0 0 .25rem; letter-spacing: -0.01em; }
.ps-auth h2 { font-size: 1rem; font-weight: 500; color: var(--bs-secondary-color); margin: 0 0 1rem; }
.ps-auth h3 { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }

/* Bootstrap's focus ring is brand-blue by default; make it match. */
.ps-auth .form-control:focus,
.ps-auth .form-select:focus {
    border-color: var(--ps-primary);
    box-shadow: 0 0 0 .25rem rgb(var(--bs-primary-rgb) / 25%);
}

/* ---- Blazor's error banner ----------------------------------------------------------------------------------
   AccountLayout renders #blazor-error-ui, and Blazor shows it (display: block) only when something fails. The rule
   that HIDES it by default used to live only in MainLayout.razor.css -- scoped CSS, which matches MainLayout's own
   markup and nothing else -- so on every Identity page the banner "An unhandled error has occurred" showed
   permanently, until 2026-09-29. Same rule as MainLayout's; guarded by UiConsistencyGuardTests
   (EveryErrorBannerHasARuleThatHidesIt) and the TheAccountPagesDoNotShowTheErrorBanner browser test. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }