/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Apiar Auth — palette + the un-themed flow pages.

   This sheet is loaded by EVERY auth surface, including Pages/Logout.cshtml, which is a Razor Page
   outside the Blazor App.razor head. That is why the palette lives here and not in login-theme.css:
   the sign-out page needs the tokens and has no business pulling the whole themed login in to get
   them. login-theme.css is layered on top for /Login and consumes what is declared here.

   Palette source of truth: Apiar.Web/wwwroot/app.css. Keep in step with it.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Navy ramp. --ap-navy-3 is the stop the consoles do not carry, and it is what makes the
       site's dark surfaces read as a ramp rather than a flat block. */
    --ap-navy: #041B4D;
    --ap-navy-rgb: 4, 27, 77;
    --ap-navy-2: #0A2E6E;
    --ap-navy-3: #123E8C;

    /* ── Accent, split by WHAT the colour is on:
         --ap-action  #087ABD  fills that carry a white label. 4.64:1 (AA) — and that is the
                               ceiling, not a preference: #087CBF is already 4.52:1.
         --ap-icon    #0A8FDC  graphics — strokes, indicators, focus rings. 3.51:1, clearing the
                               3:1 graphics floor, which is the brightness a fill cannot take.
         --ap-accent  #44A6DC  gradient endpoint and highlight on navy. Never text on light. */
    --ap-action: #087ABD;
    --ap-action-rgb: 8, 122, 189;
    --ap-action-strong: #066CA7;
    --ap-action-deeper: #055A8C;
    --ap-icon: #0A8FDC;
    --ap-accent: #44A6DC;
    --ap-accent-rgb: 68, 166, 220;
    --ap-sky-soft: #A6D4F0;

    /* ── Light surfaces + ink. */
    --ap-band: #EAF2FC;
    --ap-band-fade: #F8FAFE;
    --ap-surface: #F5F8FC;
    --ap-stealth: #FCFCFE;
    --ap-white: #FFFFFF;
    --ap-ink: #0F1830;
    --ap-ink-rgb: 15, 24, 48;
    --ap-text-muted: rgba(var(--ap-ink-rgb), 0.68);
    --ap-line: rgba(var(--ap-navy-rgb), 0.10);
    --ap-stroke: #DCE9F7;
    --ap-error: #DC2626;

    /* ── Gradients. --ap-grad-dark is the site's dark-surface ramp: 140deg through three navy
       stops. The login used to run 135deg from --ap-action INTO navy, which starts on the button
       blue and reads brighter and flatter than anything on the site. */
    --ap-grad: linear-gradient(115deg, var(--ap-action) 0%, var(--ap-accent) 100%);
    --ap-grad-dark: linear-gradient(140deg, var(--ap-navy) 0%, var(--ap-navy-2) 58%, var(--ap-navy-3) 100%);

    --ap-radius-sm: 8px;
    --ap-radius-md: 12px;
    --ap-radius-lg: 18px;
    --ap-radius-xl: 24px;

    /* Navy-tinted, not black. A black shadow over a navy ground greys it; the site tints every
       shadow with --ap-navy-rgb so the ground stays blue. */
    --ap-shadow-sm: 0 1px 3px rgba(var(--ap-navy-rgb), 0.07);
    --ap-shadow-md: 0 10px 30px -8px rgba(var(--ap-navy-rgb), 0.14);
    --ap-shadow-xl: 0 34px 90px -20px rgba(var(--ap-navy-rgb), 0.32);
}

/* ===== Base reset ===== */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: "Raleway", sans-serif !important; margin: 0; }

/* ═══ The small card (sign out, unknown client) ═══
   ⚠️ What is LEFT here after /activate, /reset-password and /forgot-password moved onto the same
   AuthCard as /Login: the OIDC sign-out prompt and Login.razor's "this client is not recognised"
   fallback. Both are momentary, neither belongs to a client, and neither has a brand to put on a
   680px card — so they keep the small centred one. Client-neutral still means the Apiar palette: the
   canvas is --ap-surface, the same light ground ConfigService's body and PSA's mobile main use. */
.placeholder-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--ap-surface);
}

.placeholder-card {
    text-align: center;
    max-width: 420px;
    padding: 3rem 2rem;
    background: var(--ap-white);
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow-md);
}

.placeholder-card h1 { font-size: 1.35rem; color: var(--ap-navy); margin: 0 0 .75rem; font-weight: 600; }
.placeholder-card p { color: var(--ap-text-muted); font-size: .95rem; line-height: 1.6; margin: 0 0 1.5rem; }

/* The sign-out prompt's form is the only one left on this card, and it is one button. The input,
   label and error rules that used to live here went with /activate — that page now renders FluentUI
   controls inside the themed card, and rules nothing selects are rules nobody keeps honest. */
.placeholder-card form {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-align: left;
    margin-top: 1.5rem;
}

/* --ap-action, not --ap-icon: this fill carries a white label, so it answers to 4.5:1. */
.placeholder-card button {
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    background: var(--ap-action);
    color: var(--ap-white);
    border: none;
    border-radius: var(--ap-radius-sm);
    padding: .65rem 1.25rem;
    margin-top: 1.25rem;
    cursor: pointer;
    transition: background-color .15s ease;
}

.placeholder-card button:hover { background: var(--ap-action-strong); }
.placeholder-card button:active { background: var(--ap-action-deeper); }