/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Apiar login theme — ONE sheet, shared by every themed login.

   ⛔ GLOBAL, not a .razor.css. The theme markup's outermost element sits inside
   <FluentDesignSystemProvider>, which is a COMPONENT — and Blazor's CSS isolation never stamps its
   scope attribute on a component tag. So the old scoped sheets compiled `::deep .login-container`
   to `[b-…] .login-container`, which needs a scoped ANCESTOR and had none: that rule was dead in
   both themes. It went unnoticed only because .login-wrapper repeats the canvas background and
   min-height, so the page still looked right. Out here there is no scope to get wrong.

   ⛔ ONE sheet, not one per theme. ApiarPSALogin and ApiarCloudLogin each carried their own
   ~200-line copy, and the copies drifted into two different designs on the same palette — PSA navy,
   Cloud white. The .razor components stay separate (they differ in brand copy); the look does not.
   A future client that genuinely needs a different look adds its own sheet on top of this one.

   ⚠️ Layered ON TOP of css/login.css, which declares the palette tokens every rule below reads.
   The tokens live there because Pages/Logout.cshtml loads that sheet alone.

   Palette source of truth: Apiar.Web/wwwroot/app.css. These are that file's tokens, not a
   re-derivation — the login is the first Apiar surface anyone sees, so it reads as the site.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═══ Canvas ═══
   The site's hero: --ap-grad-dark, with two soft accent glows floated over it at the same
   positions and opacities the hero uses. */
.login-container {
    min-height: 100vh;
    background: var(--ap-grad-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    min-height: 100vh;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(40rem 26rem at 88% -8%, rgba(var(--ap-accent-rgb), 0.30), transparent 62%),
        radial-gradient(30rem 22rem at 0% 108%, rgba(var(--ap-accent-rgb), 0.17), transparent 62%),
        var(--ap-grad-dark);
}

/* ═══ Card ═══ */
.login-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 42% 58%;
    background: var(--ap-white);
    border-radius: var(--ap-radius-xl);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10),
        var(--ap-shadow-xl);
    min-height: 680px;
    width: clamp(900px, 65vw, 1200px);
}

/* The site's navy-card motif: a 4px --ap-grad hairline across the top edge. */
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--ap-grad);
    z-index: 2;
}

/* ═══ Left brand panel ═══
   The site's light band, running white → band-fade → band on the same 140deg as the dark ramp. */
.login-brand {
    background: linear-gradient(140deg, var(--ap-white) 0%, var(--ap-band-fade) 55%, var(--ap-band) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(50px, 6vw, 80px) clamp(40px, 5vw, 60px);
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--ap-line);
}

.login-brand::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle at 70% 30%, rgba(var(--ap-accent-rgb), 0.14) 0%, transparent 60%);
    pointer-events: none;
}

.login-brand::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle at 30% 70%, rgba(var(--ap-accent-rgb), 0.10) 0%, transparent 55%);
    pointer-events: none;
}

.brand-content {
    text-align: center;
    z-index: 1;
    position: relative;
}

.brand-icon {
    margin-bottom: 32px;
    filter: drop-shadow(0 6px 16px rgba(var(--ap-navy-rgb), 0.18));
    animation: float 3s ease-in-out infinite;
}

.brand-icon svg { fill: var(--ap-navy); }

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.brand-title {
    color: var(--ap-navy);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}

.brand-subtitle {
    color: var(--ap-text-muted);
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 400;
    line-height: 1.5;
    max-width: 260px;
    margin: 0 auto;
}

/* ═══ Right form panel ═══ */
.login-form {
    padding: clamp(50px, 6vw, 80px) clamp(40px, 5vw, 70px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--ap-white);
}

/* ═══ Fields ═══
   Shared/AuthTextInput.razor: NATIVE inputs, so a password manager can find them (see that file).
   Drawn to match the Fluent field they replace at --design-unit 5 — 40px tall, 4px corners, a
   hairline stroke that takes the focus colour — so the page does not read as two libraries. */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.auth-field-label {
    color: var(--ap-ink);
    font-size: 14px;
    line-height: 20px;
}

.auth-input-wrap { position: relative; width: 100%; }

.auth-input-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
}

.auth-input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    font: inherit;
    font-size: 15px;
    color: var(--ap-ink);
    background: var(--ap-white);
    border: 1px solid rgba(var(--ap-navy-rgb), 0.22);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.auth-input::placeholder { color: var(--ap-text-muted); }
.auth-input:hover { border-color: rgba(var(--ap-navy-rgb), 0.38); }

.auth-input:focus {
    border-color: var(--ap-icon);
    box-shadow: 0 0 0 1px var(--ap-icon);
}

/* InputText stamps .invalid on a field the EditContext rejected — on a static page, after the post. */
.auth-input.invalid { border-color: var(--ap-error); }
.auth-input.invalid:focus { box-shadow: 0 0 0 1px var(--ap-error); }

.login-form fluent-button { width: 100%; --design-unit: 5; font-size: 15px; }

.form-header { margin-bottom: 16px; }

.form-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ap-navy);
    margin-bottom: 8px;
}

.form-subtitle {
    color: var(--ap-text-muted);
    font-size: clamp(14px, 1.2vw, 15px);
    margin-bottom: 4rem;
}

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
}

.form-options fluent-checkbox { transform: scale(1.25); transform-origin: left center; }
.form-options fluent-checkbox::part(label) { font-size: 12px; }

.form-options fluent-anchor { margin-left: auto; }

/* The link pill. */
.form-options fluent-anchor::part(control) {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    background: var(--ap-surface);
    border-radius: 6px;
    padding: 0 12px;
}

.form-options fluent-anchor::part(control):hover {
    background: var(--ap-band);
}

.validation-message { color: var(--ap-error); font-size: 13px; font-weight: 500; }
.text-muted { color: var(--ap-text-muted); font-size: 14px; font-weight: 500; }

/* ═══ Flow states ═══
   /activate, /reset-password and /forgot-password render through the same AuthCard as /Login and
   inherit everything above. What they add is the shape /Login does not have: a TERMINAL state — a
   link redeemed, a mail sent, a limit tripped — which is a sentence and one action rather than a
   form. */

/* ⛔ On /Login the <form> is a block child of .login-form, whose default align-items: stretch already
   gives it the full panel. On a flow page it is a child of a FluentStack, which ALIGNS its children
   rather than stretching them — without this the form shrink-wraps and every field inside it
   collapses to its content width. A no-op for /Login. */
.login-form form { width: 100%; }

.form-note {
    color: var(--ap-text-muted);
    font-size: clamp(14px, 1.2vw, 15px);
    line-height: 1.6;
    margin: 0;
}

/* The small label over a title that is not the page's own — "Error 404" on the not-found card.
   --ap-action, not --ap-accent: this is text on white, and only the action blue clears 4.5:1. */
.form-kicker {
    color: var(--ap-action);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

/* The terminal-state action, carrying the same weight as Sign In does on /Login — on these pages it
   IS the only thing left to do. ⚠️ Not `.login-form fluent-anchor`: that would also catch the
   "Forgot password?" link in .form-options and stretch it across the login form. */
.form-cta { width: 100%; }

.form-cta fluent-anchor {
    width: 100%;
    --design-unit: 5;
    font-size: 15px;
}

.form-cta fluent-anchor::part(control) {
    width: 100%;
    justify-content: center;
}

/* ═══ Footer ═══
   rgba white, not --ap-sky-soft: on the site sky-soft is reserved for kickers and accents on navy,
   while plain body copy on a dark ground runs at 0.75 white. This is body copy. */
.login-footer {
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    padding: 20px 0;
    font-size: 14px;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

/* ═══ Responsive ═══ */
@media (max-width: 1200px) {
    .login-card { width: clamp(800px, 75vw, 1000px); }
}

@media (max-width: 992px) {
    /* Full-bleed card: the canvas is no longer visible, so the ground becomes the light surface
       rather than plain white — the card's own white then still reads as a card. */
    .login-container { padding: 0; background: var(--ap-surface); }
    .login-wrapper { gap: 0; background: var(--ap-surface); }
    .login-card {
        grid-template-columns: 1fr;
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }
    .login-brand { min-height: 280px; }
    .login-footer { display: none; }
}

@media (max-width: 640px) {
    .login-brand { padding: 40px 24px; min-height: 240px; }
    .brand-icon svg { width: 56px; height: 56px; }
    .login-form { padding: 40px 24px; }
}

@media (max-width: 480px) {
    .login-form { padding: 32px 20px; }
    .login-brand { padding: 36px 20px; min-height: 220px; }
}

/* Mirrors the guard in Apiar.Web/wwwroot/app.css. */
@media (prefers-reduced-motion: reduce) {
    .brand-icon { animation: none; }
}