/* ============================================================================
 * Auth shell — unauthenticated pages. The page background follows the
 * active light/dark theme so the panel doesn't sit as a bright white slab
 * around a dark card after sign-out in dark mode. The accent colour is
 * the user's picked brand (restored by theme-init.js from localStorage
 * before Blazor boots) so the sign-in screen matches the rest of the app;
 * first-time visitors get the s2c.css default brand.
 * ============================================================================ */
.auth-shell {
    min-height: 100vh; display: flex;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    /* --s2c-primary / --primary / --primary-hover all cascade from the
       root scope; no overrides needed here. The Bootstrap aliases below
       just bridge our --primary to Bootstrap's primary slot so .btn-primary
       and link colours inherit the brand. The --auth-accent-color variable
       is consumed by the external SignInFlow component (lock icon tile,
       primary submit button, focus ring) — its internal stylesheet falls
       back to a hardcoded navy if we don't set it, which is what made
       those elements stay dark after the brand-lock was removed. */
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--s2c-primary-rgb);
    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--primary-hover);
    --auth-accent-color: var(--primary);
}
.auth-shell .btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: color-mix(in oklab, var(--primary) 80%, black);
    --bs-btn-active-border-color: color-mix(in oklab, var(--primary) 80%, black);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}
.auth-shell .btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}
.auth-shell .text-primary { color: var(--primary) !important; }
.auth-shell a:not(.btn) { color: var(--primary); }

/* Explicit overrides for the external SignInFlow component classes — the
   lib's stylesheet sets these via --auth-accent-color but specificity ties
   with :root mean some browsers/cache states keep the hardcoded navy.
   Forcing !important matches the pattern used in VC4.IMS.Blazor's
   AuthLayout and guarantees the brand colour wins regardless. */
.auth-shell .auth-header-icon {
    background-color: var(--primary) !important;
}
.auth-shell .auth-btn,
.auth-shell .auth-btn:link,
.auth-shell .auth-btn:visited {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.auth-shell .auth-btn:hover,
.auth-shell .auth-btn:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
}
.auth-shell .auth-card a:not(.auth-btn),
.auth-shell .auth-card .auth-link {
    color: var(--primary) !important;
}

/* The S2C wordmark is a PNG with navy + orange baked in. In dark mode the
   navy parts disappear against the dark background; invert+hue-rotate is the
   classic recolour trick — invert turns dark navy into light, and a 180°
   hue rotation puts the orange "2" back where it was. Same fix used in
   VC4.IMS.Blazor's AuthLayout. */
[data-bs-theme="dark"] .auth-shell .auth-logo {
    filter: invert(1) hue-rotate(180deg);
}
.auth-image {
    flex: 1 1 50%; position: relative; overflow: hidden;
    margin: 24px; border-radius: 16px;
    box-shadow: 0 20px 60px -20px rgba(9,30,66,.25);
    display: none;
}
.auth-image img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
}
.auth-image-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #fff; text-align: center; padding: 2rem;
    background: linear-gradient(180deg, rgba(9,30,66,.25) 0%, rgba(9,30,66,.55) 100%);
}
.auth-image-overlay h1 {
    /* Force white regardless of light/dark theme — the global h1 color rule
       from s2c.css would otherwise pull it to --s2c-strong (dark in light mode). */
    color: #fff;
    font-size: 2.25rem; font-weight: 700;
    margin: 0; letter-spacing: .5px;
    text-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.auth-image-overlay h3 {
    color: #fff;
    font-size: 1rem; font-weight: 500;
    margin-top: .5rem; opacity: .95;
}
.auth-panel {
    flex: 1 1 50%;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.auth-shell-card { width: 100%; max-width: 480px; display: flex; flex-direction: column; }
.auth-card { max-width: 480px !important; }
.auth-logo-wrap { display: flex; justify-content: center; margin-bottom: 24px; }
.auth-logo { max-width: 160px; height: auto; }
@media (min-width: 768px) { .auth-image { display: block; } }