/* NN: pre-login pages (Default.aspx, SignUp.aspx, LostPassword.aspx) restyled to match
   the look and feel of Boards (magicbullet). Loaded after each page's own stylesheet, so
   these rules override visionslive.css/home.css/signup.css for just these three pages -
   no other webscram page links this file. Header/nav/split-layout tokens are pulled from
   magicbullet's Controls/SideNav.ascx, styles/moderator.css and styles/boardTabs.css. The
   login/signup/reset form itself (heading, labels, inputs, button, card, row spacing) is
   instead matched font-for-font and pixel-for-pixel against vlqr's own login form
   (VLQR.Management.Web/Views/Membership/_Login.cshtml + visionslive.css), per an explicit
   screenshot comparison - that's the more precise, directly-supplied reference for the
   form itself, so it takes precedence there over the general Boards design tokens. */

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333333;
    background-color: #F7F9FB;
    width: 100%;
    max-width: 1400px;
    padding-top: 0;
}

/* ONE shared card (background/border/radius/shadow all live here now) containing two
   internal columns - #sidepanel (marketing) and #content (login form) - split by a
   single divider (#sidepanel's border-right) instead of being two independently
   bordered/shadowed boxes. Two separate boxes forced to equal height read as either
   "padded out and empty" (login) or broken (unequal) - one shared card sidesteps the
   problem entirely, since there's no second box height to reconcile against. */
.authSplit {
    display: flex;
    align-items: stretch;
    width: calc(100% - 32px);
    max-width: 1200px;
    margin: 40px auto;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4.5px 3.6px rgba(0, 0, 0, .007),
                0 12.5px 10px rgba(0, 0, 0, .01),
                0 30.1px 24.1px rgba(0, 0, 0, .013),
                0 100px 80px rgba(0, 0, 0, .02);
}

#sidepanel {
    float: none;
    /* Grows to absorb whatever #content's now-fixed 428px doesn't use, rather than a
       fixed percentage - two non-growing sides (0 0 55% here, 0 1 428px on #content)
       didn't reliably sum to the card's full width, leaving a gap after #content before
       the card's own right edge. */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 4px;
    background-color: #EEF1F5;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* Default.aspx-specific (the only #sidepanel with .marketingCarousel inside it -
   SignUp/LostPassword's is the #sidepanelA/#sidepanelB photo-collage instead): height
   comes from the marketing panel's own aspect ratio rather than stretching to match
   whatever height the login form's content happens to produce, per explicit spec
   ("~800x600-ish", i.e. 4:3). #content (below) stretches to match THIS height via the
   default align-items:stretch on .authSplit - both columns end up the same height, but
   the marketing panel is what's driving it, not the other way round. */
.authSplit:has(.marketingCarousel) #sidepanel {
    aspect-ratio: 4 / 3;
}

/* Below this width the marketing panel is just dropped rather than stacked above the
   form full-width - simpler than sizing an aspect-ratio image sensibly at an arbitrary
   narrow width, and the login form is the only thing that actually needs to be usable
   on a small screen. #content's fixed 428px basis (see below) still shrinks via its own
   flex-shrink where the viewport is narrower than that.

   NN-3115 fix: this block used to sit ABOVE the "#sidepanel { display: flex }" rule
   before it. A media query adds no specificity, so both selectors were a plain
   "#sidepanel" (1,0,0) and the later display:flex simply won at every width - the panel
   never hid and the page read as not responsive at all. Moved below that rule, and
   qualified with .authSplit (1,1,0) so it outranks any bare #sidepanel rule regardless of
   where one is added later. .authSplit is not a narrowing here: this stylesheet is only
   linked by Default/SignUp/LostPassword, and all three wrap their panel in it. */
@media (max-width: 768px) {
    .authSplit #sidepanel {
        display: none;
    }
}

/* SignUp/LostPassword's photo-collage (#sidepanelA/#sidepanelB, each holding 4 fixed-
   pixel-size tiles floated in the old layout) otherwise stays pinned at its original
   123x93px-ish size in the top-left corner of the now much larger flex column, leaving
   the rest as bare background - a real bug, not just a style mismatch. Turning each
   wrapper into a flex column, and each tile within it into an equally-stretched flex
   item, makes the whole collage fill #sidepanel's full height/width, matching
   Default.aspx's full-bleed single image. Inert there, since Default.aspx has no
   #sidepanelA/#sidepanelB to match - its lone img is the only #sidepanel flex child. */
#sidepanelA,
#sidepanelB {
    float: none;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 4px;
}

#sidepanelA > div,
#sidepanelB > div {
    flex: 1 1 0;
    width: auto;
    height: auto;
    margin: 0;
}

/* Covers both Default.aspx's single hero image and SignUp/LostPassword's photo-collage
   tiles (img_sidepanel_3/4/6/7) - object-fit lets each crop to fill its own box (the
   whole column here, or an individual mosaic tile there) instead of stretching. */
#sidepanel img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Carousel slides use contain (not the collage tiles' cover, above) - the marketing
   panel's now a 16:10 box, wider than the slides' own ~4:3 artwork, and cover was
   cropping the edges off the tagline text. contain scales each slide uniformly (never
   stretching X/Y independently) and letterboxes with white, matching the slides' own
   white canvas so the bars blend in rather than showing as a visible border. Higher
   specificity than the #sidepanel img rule above (ID + 3 classes beats ID + 1 element),
   deliberately, not by cascade-order luck - same pattern as the #content a fix earlier. */
#sidepanel .marketingCarousel .carouselSlide {
    object-fit: contain;
    background-color: #FFFFFF;
}

/* Default.aspx's marketing panel auto-rotates through stacked, absolutely-positioned
   slides (crossfaded by toggling .active, see the inline script in Default.aspx) instead
   of a single static hero image. Needs explicit width/height:100% - it's a flex child of
   #sidepanel with no in-flow content of its own (every slide inside it is
   position:absolute), so it has no intrinsic size to stretch to otherwise. */
.marketingCarousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.marketingCarousel .carouselSlide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.marketingCarousel .carouselSlide.active {
    opacity: 1;
}

/* Anchored to the bottom of the marketing panel itself (inside .marketingCarousel, which
   fills #sidepanel exactly) rather than overflowing below the shared card - now that
   there's only one card, dots living outside it would look like a stray floating
   element, not part of the design. */
.carouselDots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Slides all have a white background, so dots need real contrast against white rather
   than the usual translucent-white-on-photo treatment - brand blue, pale when inactive.
   A subtle shadow keeps them visible if a future slide ever isn't white underneath. */
.carouselDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0, 133, 189, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.carouselDot:hover {
    background-color: rgba(0, 133, 189, 0.5);
}

.carouselDot.active {
    background-color: #0085BD;
    transform: scale(1.2);
}

/* The collage's solid-colour filler tiles (#sidepanel_1/2/5/8, no photo behind them)
   were maroon/red/grey (#D83C3F, #974140, #994140, #AEAEAE) - recoloured to Boards'
   own blue/slate palette so they read as on-brand accents, not leftover clashing tones. */
/* Prefixed with .authSplit (not just the bare #sidepanel_N ID) because ColourScheme.ashx
   - a dynamically-generated per-brand stylesheet loaded last in <head>, after this file -
   independently sets its own colours on these same IDs (plus #sidepanel_4/6/7 as
   transparent-on-photo tiles, and .pagebutton/h2 below) at equal bare-ID specificity, so
   it was winning ties/overrides silently. The extra class ancestor is a deliberate,
   minimal specificity bump - not a fight with ColourScheme.ashx itself, which still governs
   every other page on the site. */
.authSplit #sidepanel_1 { background-color: #2680C2; }
.authSplit #sidepanel_2 { background-color: #0085BD; }
.authSplit #sidepanel_5 { background-color: #253237; }
.authSplit #sidepanel_8 { background-color: #5B9BD5; }

/* #sidepanel_3/4/6/7 carry a photo (img covers the div), but ColourScheme.ashx still
   paints a background colour under it - harmless while the image loads, visible if it
   ever fails to. Zeroed out for robustness, same specificity reasoning as above. */
.authSplit #sidepanel_3,
.authSplit #sidepanel_4,
.authSplit #sidepanel_6,
.authSplit #sidepanel_7 {
    background-color: transparent;
}

#header {
    align-items: center;
    padding: 16px 24px;
    margin-bottom: 0;
}

#visions_logoB {
    margin-top: 0;
}

#visions_logoB img {
    height: 34px;
    width: auto;
}

#member_login {
    margin-top: 0;
    margin-right: 0;
}

#member_login a,
.welcomeMessage {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

#member_login a {
    font-weight: 600;
    color: #253237;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
}

#member_login a:hover {
    background-color: #EEF1F5;
    color: #0085BD;
}

/* Sign-up/Help strip under the logo - redundant now that Sign up lives inside the login
   card itself (.AspNet-Login-SignUpPanel), so hidden rather than restyled. */
#visionslive_banner {
    display: none;
}

/* Right-hand column of the shared card (.authSplit carries the actual card background/
   border/radius/shadow now - this is no longer its own separate box, just a padded
   column). Stretches to match #sidepanel's height via .authSplit's default
   align-items:stretch - both columns end up the same height without either one having
   to guess at the other's natural size. */
#content {
    position: static;
    float: none;
    /* Was 1 1 45% - on a 1000px card that's ~448px, wider than the form actually needs
       (100px label + 8px gap + 260px input + 60px padding = 428px), leaving a ~20px gap
       on the right that the full-width .AspNet-Login-ActionsPanel row filled via
       justify-content:flex-end but the fixed-260px input didn't - Forgot password/Log in
       sat 20px right of the input's own right edge. Fixed-width to the form's actual
       content width closes that gap and narrows the column at the same time. */
    flex: 0 1 428px;
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    min-height: 0;
    height: auto !important;
    margin: 0;
    padding: 20px 30px;
}

/* Default.aspx only (the only #content sharing a card with .marketingCarousel) -
   vertically centres the logo/heading/form/signup-line as a group within whatever
   height #sidepanel's aspect ratio produces, rather than pinning them to the top and
   leaving bare space below. SignUp/LostPassword's much longer forms stay top-aligned
   (unset here), where centering a tall form in a tall box wouldn't read as intentional
   the same way it does for this short one. */
.authSplit:has(.marketingCarousel) #content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* .authSplit-prefixed: ColourScheme.ashx also declares "#content h2, .AspNet-Login-
   TitlePanel {color:#0085BD}" (see the sidepanel comment above) - happens to be the same
   value here, so no visible bug, but a tie at equal specificity is decided by cascade
   order (ColourScheme.ashx loads last) rather than intent. Bumped deliberately. */
.authSplit #content h2 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #0085BD;
    padding-top: 0;
    margin-bottom: 16px;
}

#content p {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    margin-bottom: 12px;
}

/* visionslive.css's own "#content a { color: #0000BB }" is an ID selector, so it beats
   any class-based override below on specificity regardless of cascade order (a real bug
   found by inspection - the Forgot password/Sign up links were rendering in the old navy
   #0000BB, not the intended #0085BD). Matching the selector itself, at equal specificity,
   is what lets source order (this file loads after visionslive.css) actually decide it. */
#content a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #0085BD;
    text-decoration: none;
}

#content a:hover {
    color: #004F71;
    text-decoration: underline;
}

/* SignUp/LostPassword field rows (li's, or bare label+input pairs) get the same 12px
   row rhythm as Default.aspx's flex .AspNet-Login-Body above. */
#content ul li {
    margin-bottom: 12px;
}

.AspNet-Login {
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.authSplit .AspNet-Login-TitlePanel {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #0085BD;
    margin-bottom: 4px;
}

.AspNet-Login-Subcopy {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #737D87;
    margin: 0;
}

.AspNet-Login-Body {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

/* Label-beside-input row, matching vlqr's .inputContainer (flex, 8px gap) - replaces the
   old float:left label column. Floats on .label (SignUp/LostPassword, still used outside
   these three pages) are simply inert on a flex child, so no separate override is needed
   there beyond the shared width/font rule below. */
.AspNet-Login-UserPanel,
.AspNet-Login-PasswordPanel,
.AspNet-Login-TwoFactorPanel,
#content ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
}

.AspNet-Login-Body label,
.label {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #333333;
    width: 100px;
}

/* flex-basis only where the label sits in a flex row (Default.aspx's panels, SignUp's
   li's) - it's inert outside flex layout, so LostPassword.aspx's bare label+input pairs
   (no wrapping li) are untouched here and keep visionslive.css's inherited
   float:left/display:block/clear:left, with just width:100px overridden above. */
.AspNet-Login-Body label,
#content ul li .label {
    flex: 0 0 100px;
}

/* Field validators drop to their own line under the label+input row instead of
   squeezing into it, via flex-basis:100% on a wrapped flex row. */
#content ul li .errormsg {
    flex-basis: 100%;
    margin-left: 108px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #FF0000;
}

/* 2FA's "(only if your account has 2FA)" hint used to be a separate span next to the
   input - now the input's own placeholder text instead, with just native browser
   placeholder behaviour (visible while empty, gone once text is typed). */
.AspNet-Login input::placeholder {
    color: #9AA5AC;
    opacity: 1;
}

.AspNet-Login input:not([type="submit"]):not([type="checkbox"]),
.AspNet-Login-UserPanel input,
.textbox,
.textboxnarrow,
.textboxmultiline,
.dropdownlist {
    flex: 0 1 260px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #555555;
    border: solid 1px #E0E0E0;
    border-radius: 4px;
    padding: 8px 12px;
    min-height: 38px;
    box-sizing: border-box;
}

.AspNet-Login-RememberMePanel,
.checkbox {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
}

/* The checkbox's own auto-generated label ("Remember me next time") and the empty
   associate label both matched ".AspNet-Login-Body label" above and were being squeezed
   into the 100px label column meant for Email/Password/2FA - wrapping the checkbox text
   onto two lines instead of spanning the row's full width. This isn't a label+input row,
   so it opts out of that width/flex-basis entirely. */
.AspNet-Login-RememberMePanel label {
    width: auto;
    flex: none;
    float: none;
}

/* Aligned under the input column (matching the 2FA hint's 108px offset = 100px label +
   8px gap) rather than flush left under the labels, and given real breathing room
   between the checkbox and its text instead of them sitting edge-to-edge. */
.AspNet-Login-RememberMePanel {
    margin-left: 108px;
}

.AspNet-Login-RememberMePanel input[type="checkbox"] {
    margin-right: 8px;
}

/* Forgot-password link + Login button share one right-aligned row, matching vlqr's
   #standardLoginActions - PasswordRecoveryPanel is reordered before SubmitPanel in the
   markup (Default.aspx) so it reads as "link, then button" left-to-right. */
.AspNet-Login-ActionsPanel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 12px;
    margin-top: 16px;
}

/* .authSplit-prefixed: ColourScheme.ashx also declares bare ".pagebutton{background-
   color:#0085BD}" / ":hover{#006699}" - close enough in hue that it wasn't obviously
   wrong at a glance, but not the vlqr-matched #0077A9/#006894 this file targets. Bumped
   past ColourScheme.ashx's specificity deliberately, same as the sidepanel/heading fixes
   above; other pages' .pagebutton (outside these 3, which don't load this file anyway)
   are untouched. */
/* Sizing (padding/font-size) matches Boards' own .primaryActionBtn (moderator.css) - the
   vlqr reference used an odd asymmetric 7px/4px top/bottom padding at 14px that read as
   the wrong height/weight next to Boards' actual buttons. Color stays vlqr-matched
   (#0077A9), that part wasn't the complaint. */
.authSplit .pagebutton,
.authSplit .pagebutton-hover {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    background-color: #0077A9;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    margin: 0;
}

.authSplit .pagebutton:hover {
    background-color: #006894;
}

.AspNet-Login-FailurePanel span,
.errormsg,
.feedbacktext {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
}

.privacy,
.passwordSecurity {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #737D87;
}

/* Was position:absolute, pinned to the bottom of a fixed-height #content box. #content is
   auto-height in this theme, so let it flow under the submit button instead. */
.privacy {
    position: static;
    margin-top: 12px;
}

/* Was relying on a mix of visionslive.css's inherited margin-top:10px (copyright),
   .versionInfo's own margin-top:6px, and a bare <br/>'s implicit line-height gap (between
   the copyright line and the Terms/Third Party links) - three different, uncoordinated
   values, so the 4 visible rows (Tel, copyright, links, version) never read as evenly
   spaced. Flex + one shared gap value replaces all of that; the <br/> was swapped for
   .footerLinksRow (COPYRIGHT_INFO in Visionslive.resx) so the links row is a real
   block-level box the same gap can apply to, not just a line break. */
#footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#footer p.privacycontact,
#footer p.copyright {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #737D87;
    margin: 0;
}

.footerLinksRow {
    display: block;
    margin-top: 8px;
}

#footer a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #0085BD;
    text-decoration: none;
}

#footer a:hover {
    color: #004F71;
    text-decoration: underline;
}

#footer p.copyright a + a {
    margin-left: 12px;
}

/* Version number - moved out of privacycontact_info (MasterPage.master.cs) into its own
   trailing element so it sits last, below the copyright/terms line, and reads as an
   understated footnote rather than being lumped in with the contact phone number. */
.versionInfo {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #D3D8DC;
    margin: 0;
}

.AspNet-Login-SignUpPanel {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E0E0E0;
}

.AspNet-Login-SignUpPanel a {
    font-weight: 600;
}