/* ============================================================
   Auth experience — premium split-screen sign-in
   Scoped under .auth-shell so it never leaks into the app UI.
   ============================================================ */

.auth-shell {
    /* Stratos brand system — sourced from stratosintel.ai */
    --brand: #2563eb;
    --brand-600: #1d4ed8;
    --brand-700: #1e40af;
    --brand-900: #1e3a8a;
    --accent: #38bdf8;
    --accent-soft: #7aa7ff;

    --navy: #0b1020;

    --ink: #0f172a;
    --ink-soft: #334155;
    --muted: #5b647a;
    --line: #e2e8f0;
    --surface: #ffffff;
    --surface-tint: #f7f8fc;

    --radius: 16px;
    --radius-sm: 12px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .18);
    --shadow-btn: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-btn-hover: 0 8px 20px -8px rgba(37, 99, 235, .45);

    flex: 1 1 auto;
    width: 100%;
    display: flex;
    min-height: 100vh;
    background: var(--surface);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------
   Brand panel (left)
   ---------------------------------------------------------------- */
.auth-brand {
    position: relative;
    flex: 1 1 52%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2.5rem, 4vw, 4.25rem);
    color: #fff;
    background:
        radial-gradient(110% 110% at 12% 12%, rgba(37, 99, 235, .55) 0%, transparent 45%),
        radial-gradient(120% 120% at 90% 4%, rgba(14, 165, 233, .42) 0%, transparent 46%),
        radial-gradient(120% 130% at 80% 100%, rgba(29, 78, 216, .5) 0%, transparent 52%),
        linear-gradient(160deg, #0d1530 0%, var(--navy) 100%);
    isolation: isolate;
}

/* soft drifting light orbs */
.auth-brand::before,
.auth-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    z-index: -1;
    opacity: .55;
    pointer-events: none;
}

.auth-brand::before {
    width: 38vw;
    height: 38vw;
    top: -10%;
    right: -8%;
    background: radial-gradient(circle, rgba(56, 189, 248, .5), transparent 60%);
    animation: auth-float-a 18s ease-in-out infinite;
}

.auth-brand::after {
    width: 30vw;
    height: 30vw;
    bottom: -12%;
    left: -6%;
    background: radial-gradient(circle, rgba(37, 99, 235, .55), transparent 60%);
    animation: auth-float-b 22s ease-in-out infinite;
}

/* faint grid texture */
.auth-brand__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
}

.auth-brand__logo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}

/* geometric "rising signals" mark — evokes Stratos (signals → growth), not the flask */
.auth-brand__logo-mark {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.auth-brand__logo-mark rect {
    fill: #fff;
}

.auth-brand__logo-mark rect:nth-child(2) { fill: var(--accent-soft); }
.auth-brand__logo-mark rect:nth-child(3) { fill: var(--accent); }

.auth-brand__logo-text {
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -.02em;
    color: #fff;
}

.auth-brand__body {
    max-width: 30rem;
}

.auth-brand__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-soft);
    margin-bottom: 1.25rem;
}

.auth-brand__eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: .7;
}

.auth-brand h1 {
    font-size: clamp(2.1rem, 3.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 700;
    margin: 0 0 1.1rem;
}

.auth-brand h1 .accent {
    background: linear-gradient(90deg, #bdd6ff, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-brand__lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 2rem;
}

.auth-brand__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}

.auth-brand__features li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .98rem;
    color: rgba(255, 255, 255, .8);
}

.auth-brand__features strong {
    color: #fff;
    font-weight: 600;
}

.auth-brand__features svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #cfe0ff;
}

.auth-brand__footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .62);
}

.auth-brand__footer .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
}

/* ----------------------------------------------------------------
   Form panel (right)
   ---------------------------------------------------------------- */
.auth-pane {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--surface);
}

.auth-card {
    width: 100%;
    max-width: 25rem;
    animation: auth-rise .6s cubic-bezier(.22, 1, .36, 1) both;
}

/* centered variant for status pages (signed out, locked, access denied) */
.auth-card--centered {
    text-align: center;
}

.auth-card--centered .auth-card__sub {
    margin-bottom: 1.5rem;
}

/* circular icon badge used on status / confirmation pages */
.auth-icon {
    width: 56px;
    height: 56px;
    margin: 0 0 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--brand);
    background: #eff5ff;
    border: 1px solid #d6e4ff;
}

.auth-card--centered .auth-icon {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.auth-icon svg {
    width: 28px;
    height: 28px;
}

.auth-icon--danger {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fde0e0;
}

/* mobile-only wordmark (the brand panel is hidden < 520px) — no icon, per design */
.auth-card__mark {
    display: none;
    margin-bottom: 1.75rem;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    color: var(--ink);
}

.auth-card__mark .accent {
    color: var(--brand);
}

.auth-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 .4rem;
    color: var(--ink);
}

.auth-card__sub {
    color: var(--muted);
    font-size: .95rem;
    margin: 0 0 1.75rem;
}

/* status / info alerts — restyled, calmer than Bootstrap defaults */
.auth-card .alert {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    font-size: .88rem;
    margin-bottom: 1.25rem;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

.auth-card .alert-info {
    background: #eff5ff;
    border-color: #d6e4ff;
    color: #1d4ed8;
}

.auth-card .alert-warning {
    background: #fff8eb;
    border-color: #fde9c8;
    color: #b45309;
}

.auth-card .alert-danger {
    background: #fef2f2;
    border-color: #fde0e0;
    color: #b91c1c;
}

.auth-card .alert-success {
    background: #f0fdf6;
    border-color: #ccf1dd;
    color: #15803d;
}

/* provider buttons */
.sso-group {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sso-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    min-height: 52px;
    padding: 0 1.25rem;
    font-size: .98rem;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-btn);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.sso-btn img {
    width: 22px;
    height: 22px;
}

.sso-btn:hover {
    transform: translateY(-2px);
    border-color: #cdd6e4;
    box-shadow: var(--shadow-btn-hover);
}

.sso-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-btn);
}

.sso-btn:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(15, 83, 186, .18);
}

/* loading state toggled by auth-forms.js (sets disabled, swaps in a spinner) */
.sso-btn[disabled] {
    cursor: progress;
    transform: none;
    box-shadow: var(--shadow-btn);
    color: var(--muted);
}

.sso-btn[disabled] .spinner-border {
    color: var(--brand);
}

/* divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--muted);
    font-size: .8rem;
    letter-spacing: .02em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* helper + legal copy */
.auth-help {
    text-align: center;
    font-size: .9rem;
    color: var(--ink-soft);
    margin: 0 0 .35rem;
}

.auth-help strong {
    color: var(--ink);
    font-weight: 600;
}

.auth-meta {
    text-align: center;
    font-size: .85rem;
    margin: 0;
}

.auth-link {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
    transition: color .15s ease;
}

.auth-link:hover {
    color: var(--brand-700);
    text-decoration: underline;
}

.auth-legal {
    margin-top: 2.25rem;
    text-align: center;
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.6;
}

.auth-legal a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-legal a:hover {
    color: var(--ink-soft);
}

/* generic content pages (ExternalLogin, SignedOut, etc.) */
.auth-card h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 1.25rem;
    color: var(--ink);
}

.auth-card .form-floating > .form-control {
    border-radius: var(--radius-sm);
}

.auth-card .btn-primary {
    min-height: 50px;
    border-radius: var(--radius-sm);
    background: var(--brand);
    border-color: var(--brand);
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-card .btn-primary:hover {
    background: var(--brand-700);
    border-color: var(--brand-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

/* ----------------------------------------------------------------
   Animations
   ---------------------------------------------------------------- */
@keyframes auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

@keyframes auth-float-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-3%, 4%) scale(1.06); }
}

@keyframes auth-float-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(4%, -3%) scale(1.08); }
}

/* stagger the sign-in buttons in */
.auth-card .sso-btn,
.auth-card .auth-divider,
.auth-card .auth-help,
.auth-card .auth-meta {
    animation: auth-rise .55s cubic-bezier(.22, 1, .36, 1) both;
}

.auth-card .sso-btn:nth-child(1) { animation-delay: .06s; }
.auth-card .sso-btn:nth-child(2) { animation-delay: .12s; }
.auth-card .auth-divider        { animation-delay: .18s; }
.auth-card .auth-help           { animation-delay: .22s; }
.auth-card .auth-meta           { animation-delay: .26s; }

/* ----------------------------------------------------------------
   Responsive — collapse to a single column
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
    .auth-shell {
        flex-direction: column;
        min-height: 100vh;
    }

    .auth-brand {
        flex: 0 0 auto;
        padding: 2rem 1.5rem 2.25rem;
    }

    .auth-brand__body {
        max-width: none;
    }

    /* trim the brand panel down to a compact banner on phones */
    .auth-brand__features,
    .auth-brand__footer {
        display: none;
    }

    .auth-brand h1 {
        font-size: 1.7rem;
        margin-bottom: .5rem;
    }

    .auth-brand__lead {
        margin-bottom: 0;
        font-size: 1rem;
    }

    .auth-pane {
        flex: 1 1 auto;
        padding: 2rem 1.5rem 2.5rem;
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    /* hide the marketing panel entirely, surface the logo on the card */
    .auth-brand {
        display: none;
    }

    .auth-card__mark {
        display: inline-block;
    }

    .auth-pane {
        align-items: center;
    }
}

/* ----------------------------------------------------------------
   Accessibility
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .auth-shell *,
    .auth-brand::before,
    .auth-brand::after {
        animation: none !important;
        transition: none !important;
    }
}