/* =====================================================================
   Login — split brand panel + form card.
   Theme-aware via theme.css tokens (light/dark flips for free).
   Leads with the dynamic software-name wordmark; logos are secondary.
   ===================================================================== */

.bb-login {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    width: 100%;
    flex: 1 0 auto;          /* fill the column; footer sits below */
}

/* Login shell — fill the viewport with the footer always visible, and stop
   BaseMaster's Bootstrap .row negative margins from causing a horizontal
   scrollbar on this full-bleed page. */
body { overflow-x: hidden; }
.row:has(.bb-login) { margin-left: 0; margin-right: 0; }
.col-12:has(.bb-login) { display: flex; flex-direction: column; min-height: 100vh; }
#footer { flex: 0 0 auto; }

/* The EU-required cookie banner is position:fixed; reserve space while it is
   shown so it never hides the footer (it is removed once the user accepts). */
.col-12:has(.bb-login):has(#cookie-banner:not(.hidden)) { padding-bottom: 58px; }

/* ---------- Brand panel (left) ----------
   Pinned navy palette — the login brand panel stays navy/gold in BOTH themes
   (decoupled from the app chrome vars, which are light in light mode). */
.bb-login__brand {
    --app-header-bg: linear-gradient(135deg, #22345c 0%, #1b2a4a 100%);
    --app-header-text: #ffffff;
    --app-header-muted: #c7d0e0;
    --app-header-border: rgba(255, 255, 255, 0.10);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    padding: 64px 60px;
    background: var(--app-header-bg);
    color: var(--app-header-text);
}

/* Atmospheric depth: warm gold glow + soft light pool */
.bb-login__brand::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(58% 48% at 85% 10%, rgba(224, 181, 74, .22), transparent 60%),
        radial-gradient(48% 40% at 8% 96%, rgba(255, 255, 255, .07), transparent 60%);
}
/* Faint diagonal keyline texture */
.bb-login__brand::after {
    content: "";
    position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: linear-gradient(115deg, transparent 0 49.4%, rgba(255, 255, 255, .04) 49.4% 50%, transparent 50%);
    background-size: 26px 26px;
}

.bb-login__brand-inner { max-width: 460px; }

/* Brand lockup above the eyebrow. The no-tagline artwork is used and the promise is
   set as real text: inside the SVG it renders ~4px tall at this width and is unreadable,
   and as text it is translatable and selectable. */
.bb-login__logo-lockup {
    display: flex; flex-direction: column; gap: 10px;
    /* Tied to the headline as one block — at 46px the mark floated free of the claim. */
    margin-bottom: 34px;
}
.bb-login__logo {
    width: clamp(210px, 21vw, 260px); height: auto; display: block;
}
.bb-login__logo-tagline {
    font-family: 'Sora', sans-serif; font-size: 11.5px; font-weight: 600;
    letter-spacing: .26em; text-transform: uppercase;
    color: var(--app-header-muted);
}

.bb-login__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    margin-bottom: 22px;
    font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--app-header-muted);
}
.bb-login__eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bb-gold-on-dark); box-shadow: 0 0 0 4px var(--bb-gold-on-dark-soft);
}

.bb-login__wordmark {
    margin: 0;
    font-family: 'Sora', sans-serif; font-weight: 700;
    font-size: clamp(30px, 3.2vw, 44px); line-height: 1.06;
    letter-spacing: -.022em;
    color: var(--app-header-text);
}
.bb-login__wordmark .brand-accent { color: var(--bb-gold-on-dark); }

/* Client rail speaks to people who already pay, so the headline states rather than sells.
   Site.css uppercases every h1; that plus 44px/700 is a billboard voice. Corp keeps it —
   its wordmark is the software name, where caps are correct. */
.bb-login:not(.bb-login--corp) .bb-login__wordmark {
    text-transform: none;
    font-weight: 600;
    font-size: clamp(25px, 2.5vw, 33px); line-height: 1.16;
    letter-spacing: -.014em;
    /* Site.css underlines every h1; here it lands a stray hairline right above the gold keyline. */
    border-bottom: 0;
}

.bb-login__keyline {
    width: 56px; height: 3px; border-radius: 2px;
    background: var(--bb-gold-on-dark); margin: 26px 0 22px;
}

.bb-login__tagline {
    margin: 0; max-width: 36ch;
    font-family: 'Hanken Grotesk', sans-serif; font-size: 17px; line-height: 1.55;
    color: var(--app-header-muted);
}

/* Feature list — the "what it does" lead-in */
.bb-login__features { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
.bb-login__features li {
    display: flex; align-items: center; gap: 11px;
    font-family: 'Hanken Grotesk', sans-serif; font-size: 15px; line-height: 1.3;
    color: var(--app-header-text);
}
.bb-login__features li i,
.bb-login__features li svg { flex: none; width: 1em; font-size: 14px; color: var(--bb-gold-on-dark); }
.bb-login__features .bb-login__more { color: var(--app-header-muted); font-style: italic; }
.bb-login__features .bb-login__more i,
.bb-login__features .bb-login__more svg { color: var(--app-header-muted); }

/* Single muted security line under the list */
.bb-login__secure {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
    font-size: 13px; color: var(--app-header-muted);
}
.bb-login__secure i,
.bb-login__secure svg { color: var(--app-accent); width: 1em; }

/* ---------- Launch rail ----------
   TODO(remove after 2026-09-16): delete this block with the rail itself.
   The screenshots are the one loud element here; everything else reuses the brand rail's
   type and spacing so the two variants feel like the same page. */
/* The rail must fit one screen: this reader has seconds, and anything under the fold is unread.
   The column shrinks into whatever height the footer leaves it, and the screenshot is the only
   thing that gives up room — the copy is the message, so it is never the part that is cut.
   :has() keeps this off the default brand rail, which is short enough to size itself. */
@media (min-width: 881px) {
    /* The cap is what gives the flex line something to distribute: without it the shell just grows
       to fit and nothing ever shrinks. Side-by-side only — stacked, the page must stay free to
       scroll or the sign-in card would ride over the footer. */
    .col-12:has(.bb-welcome) { max-height: 100vh; }
    .bb-login:has(.bb-welcome) { flex: 1 1 auto; min-height: 0; }
}
.bb-welcome { overflow: hidden; }
.bb-welcome .bb-login__wordmark { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.08; }
/* Two columns: the list is scan-fodder, and halving its height is what keeps the screenshots
   above the fold. Collapses back to one column when the rail is too narrow to split. */
.bb-welcome .bb-login__features {
    margin-top: 14px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px; row-gap: 4px;
}
.bb-welcome .bb-login__features li { margin-bottom: 6px; }
/* The rail's one full sentence. Held narrower than the two-column list under it so it reads as a
   lead-in rather than another column of scan-fodder. */
.bb-welcome__reassure { font-size: 15.5px; max-width: 46ch; }

@media (max-width: 1200px) {
    .bb-welcome .bb-login__features { grid-template-columns: 1fr; }
}

/* The default rail is text only, so 460px suits it. This one carries a screenshot and looks
   half-empty at that width — but full width makes the carousel enormous, so it is capped. */
.bb-welcome { padding: 40px 56px; }
.bb-welcome .bb-login__brand-inner {
    max-width: 700px; width: 100%;
    display: flex; flex-direction: column; max-height: 100%;
}

/* The 3:2 lives on the BOX and the height is capped against the viewport, so the width follows
   the ratio: the captures fill the frame edge to edge instead of floating in black bars. This is
   also the one flex item that may shrink, which is what keeps the rail inside a short screen. */
.bb-welcome__shots {
    margin-top: 18px;
    height: clamp(140px, 30vh, 340px);
    aspect-ratio: 3 / 2; width: fit-content; max-width: 100%;
    flex: 0 1 auto; min-height: 120px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--app-header-border, rgba(255,255,255,.14));
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    background: var(--app-header-bg, #10151f);
}
.bb-welcome__shots .carousel-inner,
.bb-welcome__shots .carousel-item { height: 100%; }
/* `contain` mats the squarer e-cards capture against the same dark ground rather than cropping
   the card out of its own slide. */
.bb-welcome__shots .carousel-item img {
    height: 100%; width: 100%;
    object-fit: contain; object-position: center;
    background-color: #0f1420;
}

/* "More on the way" is the closing item of the list, so it sits flush with the others. */
.bb-welcome .bb-login__features .bb-login__more { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .bb-welcome__shots .carousel-item { transition: none; }
}

/* ---------- Form panel (right) ---------- */
.bb-login__panel {
    position: relative;      /* anchor for the top-right language selector */
    display: flex; align-items: center; justify-content: center;
    padding: 48px 30px; background: #ffffff;
}

[data-bs-theme="dark"] .bb-login__panel {
    background: #121212;
}
.bb-login__card { width: 100%; max-width: 384px; }

.bb-login__welcome {
    margin: 0; font-family: 'Sora', sans-serif; font-weight: 600;
    font-size: 24px; letter-spacing: -.01em; color: var(--text-color);
}
.bb-login__sub { margin: 6px 0 24px; font-size: 14px; color: var(--field-label); }

/* Language selector pinned to the top-right corner of the sign-in panel, clear of the
   vertically-centred card. Absolute against .bb-login__panel (not the viewport) so it
   stays inside the white column when the two panels stack. */
.bb-login__lang {
    position: absolute;
    top: 18px;
    right: 28px;
    z-index: 2;
}

/* Gold focus ring on the real DX <input> editors */
.bb-login__card [class*="dxeFocused"],
.bb-login__card [class*="dxbeFocused"] {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px var(--app-accent-soft) !important;
}

/* Full-width primary action */
.bb-login__card .asp-button-Login { width: 100%; min-width: 0; }

.bb-login__remember { margin: 2px 0 12px; font-size: 13px; display: flex; justify-content: center; }
.bb-login__links { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 16px; }
.bb-login__referral { text-align: center; margin-top: 14px; }
.bb-login__ssl { display: flex; justify-content: center; margin-top: 20px; }

/* Staggered entrance */
@keyframes bbLoginRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.bb-login__brand-inner > *,
.bb-login__card > * { animation: bbLoginRise .55s cubic-bezier(.22, .61, .36, 1) both; }
.bb-login__brand-inner > *:nth-child(1) { animation-delay: .02s; }
.bb-login__brand-inner > *:nth-child(2) { animation-delay: .08s; }
.bb-login__brand-inner > *:nth-child(3) { animation-delay: .14s; }
.bb-login__brand-inner > *:nth-child(4) { animation-delay: .20s; }
.bb-login__brand-inner > *:nth-child(5) { animation-delay: .26s; }
.bb-login__card > *:nth-child(2) { animation-delay: .10s; }
.bb-login__card > *:nth-child(3) { animation-delay: .16s; }
.bb-login__card > *:nth-child(4) { animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
    .bb-login__brand-inner > *,
    .bb-login__card > * { animation: none; }
}

/* ---------- Responsive: stack to brand band + form ---------- */
@media (max-width: 880px) {
    /* Stacked, the brand is a name band only — content height, so the sign-in form
       stays above the fold instead of splitting the viewport with it. */
    .bb-login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .bb-login__brand { align-items: flex-start; padding: 20px 24px; }
    .bb-login__wordmark { font-size: clamp(26px, 7vw, 34px); }
    /* Repeated at the client rail's specificity, or its desktop clamp wins here and shrinks the band. */
    .bb-login:not(.bb-login--corp) .bb-login__wordmark { font-size: clamp(26px, 7vw, 34px); }
    .bb-login__keyline,
    .bb-login__tagline,
    .bb-login__features,
    .bb-login__secure,
    .bb-login__eyebrow { display: none; }
    /* The launch rail collapses to the same name band, but its own selectors outrank the plain
       .bb-login__* ones above, so the hide has to be repeated at matching specificity. */
    .bb-welcome .bb-login__features,
    .bb-welcome__shots { display: none; }
    .bb-welcome .bb-login__wordmark { font-size: clamp(24px, 6.4vw, 32px); }
    .bb-login__logo { width: clamp(140px, 42vw, 168px); }
    .bb-login__logo-lockup { margin-bottom: 26px; }
    .bb-login__panel { padding: 28px 22px 24px; }
}

/* ---------- Corporate-admin variant ---------- */
/* Brand-mark row: shield icon beside the platform wordmark. */
.bb-login--corp .bb-login__corp-mark {
    display: flex; align-items: center; gap: 16px;
}
.bb-login--corp .bb-login__corp-mark i,
.bb-login--corp .bb-login__corp-mark svg {
    flex: none; font-size: clamp(34px, 3.6vw, 46px); color: var(--bb-gold-on-dark);
}
.bb-login--corp .bb-login__wordmark { font-size: clamp(30px, 3.4vw, 44px); }

@media (max-width: 880px) {
    .bb-login--corp .bb-login__corp-mark i,
    .bb-login--corp .bb-login__corp-mark svg { font-size: clamp(28px, 7vw, 36px); }
    .bb-login--corp .bb-login__wordmark { font-size: clamp(26px, 7.5vw, 38px); }
}


/* ── Recovery pages (ForgotPassword / ForgotPasswordCorp) ────────────────────
   No marketing rail: the split panel on ClientLogin exists to sell, and someone
   locked out is doing one focused task. Additive and scoped to --focus, so no
   existing login surface can be affected. */
.bb-login--focus { grid-template-columns: 1fr; }

.bb-login--focus .bb-login__panel {
    flex-direction: column;
    /* Optically centred, not mathematically: extra bottom padding lifts the block above true
       centre, because an evenly-centred panel reads as sitting too low. The short-viewport
       rule below resets this - at 768 there is no room to spend on a bias. */
    justify-content: center;
    padding: 48px 24px 150px;
    /* Same navy as ClientLogin's rail, so recovery reads as the same product rather
       than a detour. A neutral grey would be generic; this one is ours. */
    background: linear-gradient(135deg, #22345c 0%, #1b2a4a 100%);
}

[data-bs-theme="dark"] .bb-login--focus .bb-login__panel {
    background: linear-gradient(135deg, #1a2740 0%, #131f36 100%);
}

/* The note sits on navy, not on the card. */
.bb-login--focus .bb-login__note { color: #c7d0e0; }
.bb-login--focus .bb-login__note b,
.bb-login--focus .bb-login__note strong { color: #ffffff; }

/* ClientLogin's card needs no chrome - it sits in a panel opposite the navy rail.
   With no rail there is nothing to define it, so here it gets a real surface. */
.bb-login--focus .bb-login__card {
    max-width: 460px;          /* the DX caption-left form layout overruns 384 */
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: 10px;
    padding: 30px 32px 26px;
    box-shadow: 0 1px 3px rgba(16, 32, 56, .09);
}

[data-bs-theme="dark"] .bb-login--focus .bb-login__card {
    background: #1a1a1a;
    border-color: #2a2d32;
    box-shadow: none;
}

/* Site.css underlines headings; it lands as a stray hairline across the card. */
.bb-login--focus .bb-login__welcome { border-bottom: 0; }

/* Dark-ink lockup here, not the reversed one - this panel is white. */
.bb-login__solo-lockup { display: flex; justify-content: center; margin-bottom: 28px; width: 100%; }
/* Matches ClientLogin's 260px lockup so the two screens read at the same scale.
   The panel sets align-items:center, so a % max-width would resolve against a
   shrink-wrapped box and collapse - hence an explicit px cap. */
.bb-login__solo-logo { width: 260px; max-width: 100%; height: auto; }

.bb-login__hints { margin: 0 0 10px; padding-left: 18px; color: var(--field-label); }
.bb-login__hints li { margin-bottom: 4px; }
.bb-login__hint-note { margin: 0 0 22px; color: var(--field-label); }

.bb-login__note {
    width: 100%; max-width: 460px; margin: 20px auto 0;
    font-size: 12.5px; line-height: 1.55; text-align: center; color: var(--field-label);
}


/* iPad landscape / Surface are 768 tall - ClientLogin fits that exactly, so recovery must too.
   Tighten only the vertical rhythm on short viewports; tall screens keep the roomier spacing. */
@media (max-height: 820px) {
    .bb-login--focus .bb-login__panel { padding: 26px 24px; }
    .bb-login--focus .bb-login__solo-lockup { margin-bottom: 18px; }
    .bb-login--focus .bb-login__card { padding: 24px 32px 22px; }
    .bb-login--focus .bb-login__note { margin-top: 14px; }
}