/* ==========================================================================
   Sign-In Split-Panel Layout
   ==========================================================================
   Scoped to .sign-in-* and .testimonial-carousel* classes — zero risk of
   affecting other pages. Loaded only on the index route via css_loader.py.

   Design: Financial-grade refinement with eucalyptus gradient on the right
   panel. Logo pinned top-left, content left-aligned, frosted-glass
   testimonial card on a soft green gradient.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Sign-in font variable
   --------------------------------------------------------------------------
   DM Sans is loaded conditionally in fonts.html for the unauthenticated
   index route. This variable keeps the font stack in one place.
   -------------------------------------------------------------------------- */

.sign-in-split {
    --sign-in-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* --------------------------------------------------------------------------
   1a. Split-panel grid
   --------------------------------------------------------------------------
   Mobile-first: single column. At >=1024px switches to a 50/50 grid.
   Apply DM Sans to the entire split container so all descendants inherit it
   (matching the mockup's html/body-level font declaration).
   -------------------------------------------------------------------------- */

.sign-in-split {
    display: flex;
    flex-direction: column;
    /* Ensure the split shell fills the viewport via the left panel's 100vh.
       The parent wrapper has no explicit height, so min-height: 100% here
       is a non-forcing baseline rather than the primary sizing mechanism. */
    min-height: 100%;
    font-family: var(--sign-in-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1024px) {
    .sign-in-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}


/* --------------------------------------------------------------------------
   1b. Left panel (login form)
   --------------------------------------------------------------------------
   Three-section flex column: logo at top, centred body, footer at bottom.
   -------------------------------------------------------------------------- */

.sign-in-left {
    display: flex;
    flex-direction: column;
    padding: 32px 40px;
    min-height: 100vh;
}

@media (max-width: 1023px) {
    .sign-in-left {
        padding: 24px 24px;
    }
}

/* Logo pinned to top-left */
.sign-in-left__logo {
    flex-shrink: 0;
}

.sign-in-left__logo img {
    height: 35px;
    width: auto;
}

/* Override the 85px logo width from form.css:641 — use height-based sizing for horizontal logo */
.sign-in-left #sign-in-logo {
    width: auto;
    height: 35px;
}

/* Middle body — fills remaining space and vertically centres the content */
.sign-in-left__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 0;
}

/* Inner wrapper — centre all top-level content for visual cohesion */
.sign-in-left__content {
    text-align: center;
}

/* Override generic callout spacing/width for a tighter sign-in trust section */
.sign-in-left .call-out {
    max-width: 420px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-family: var(--sign-in-font) !important;
    text-align: left;
    border-left: 3px solid #e5e7eb !important;
    /* gray-200 left accent */
    box-shadow: none !important;
}

.sign-in-left .call-out a {
    color: #111827 !important;
    /* gray-900 */
    text-decoration: underline !important;
    text-decoration-color: #d1d5db !important;
    /* gray-300 */
    text-underline-offset: 2px !important;
    box-shadow: none !important;
    transition: text-decoration-color 0.15s ease !important;
}

.sign-in-left .call-out a:hover {
    text-decoration-color: #6b7280 !important;
    /* gray-500 */
    box-shadow: none !important;
}

/* Soften the callout info icon tone for the sign-in trust block */
.sign-in-left .call-out .call-out-icon {
    color: #6b7280 !important;
    /* gray-500 */
}

/* Security badge — match mockup: green-50 bg, green-100 border, pill shape.
   CSS override to ensure consistent rendering regardless of Tailwind CDN state
   (preflight is disabled so border-style: solid is not set by default). */
.sign-in-left .security-badge-wrapper {
    background-color: #f0fdf4 !important;
    /* green-50 */
    border: 1px solid #dcfce7 !important;
    /* green-100 */
    border-radius: 100px !important;
    padding: 6px 14px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    font-weight: 500 !important;
    font-size: 0.6875rem;
    /* 11px minimum */
}

@media (min-width: 640px) {
    .sign-in-left .security-badge-wrapper {
        font-size: 0.75rem;
        /* 12px on sm+ */
    }
}

/* Visual separator between primary action buttons and trust content */
.sign-in-divider {
    width: 48px;
    height: 1px;
    background-color: #e5e7eb;
    /* gray-200 */
    margin: 24px auto 16px;
    opacity: 0.7;
}

/* Cancel inherited wrapper top margins so button spacing stays uniform */
.sign-in-left #goog-btn,
.sign-in-left #ms-btn {
    margin-top: 0 !important;
}


/* --------------------------------------------------------------------------
   1b-i. OAuth button overrides
   --------------------------------------------------------------------------
   form.css sets heavy shadows, dark borders, constrained widths, and Inter
   font on the OAuth buttons via .DIV_1, .TABLE_2, .box-shadow, and
   .tailwind-scope selectors. These !important overrides bring the buttons
   in line with the approved mockup: full-width, light-bordered, flat, DM Sans.
   -------------------------------------------------------------------------- */

/* Strip Bootstrap .container padding so buttons align flush with heading */
.sign-in-left .container {
    padding: 0 !important;
}

/* Force <a class="login"> to block so children can fill full width */
.sign-in-left a.login {
    display: block !important;
    text-decoration: none !important;
}

/* Button wrapper — full-width, no shadow, correct radius */
.sign-in-left .DIV_1 {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
}

/* Kill the heavy shadow-xl from .box-shadow class */
.sign-in-left .DIV_1.box-shadow {
    box-shadow: none !important;
    border-radius: 8px !important;
}

/* Button inner table wrapper — light gray-200 border, correct radius */
.sign-in-left .TABLE_2 {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-family: var(--sign-in-font) !important;
    background: #fff !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Preserve refined button border even when legacy highlight class is active */
.sign-in-left #f-btn.has-highlight .TABLE_2,
.sign-in-left #goog-btn.has-highlight .TABLE_2,
.sign-in-left #ms-btn.has-highlight .TABLE_2 {
    border: 1px solid #e5e7eb !important;
}

/* Button text — DM Sans at 15px/500, centred.
   .DIV_11 has display:flex from form.css (line 614-618), so text-align is
   ignored on flex containers. Use justify-content: center instead. */
.sign-in-left .DIV_11,
.sign-in-left .login-button-text {
    font-family: var(--sign-in-font) !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    justify-content: center !important;
}

/* Hover — subtle background tint only, no lift, no heavy shadow */
.sign-in-left .DIV_1:hover {
    transform: none !important;
    box-shadow: none !important;
}

.sign-in-left .DIV_1:hover .TABLE_2 {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Active press — subtle scale down matching mockup */
.sign-in-left .DIV_1:active {
    transform: scale(0.995) !important;
}

/* Equalise icon (44px) and arrow (32px) column widths so text is truly centred */
.sign-in-left .SPAN_ARROW_TD {
    width: 44px !important;
}

/* Override form.css heading rule: .tailwind-scope #sign-in-h2 sets Inter.
   Must use !important to beat the (0,1,1) specificity + Inter font.
   Weight reduced from 600→500 for a lighter, more balanced feel in context. */
.sign-in-split #sign-in-h2 {
    font-family: var(--sign-in-font) !important;
    font-size: 1.75rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: #111827 !important;
    /* gray-900 */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 28px !important;
    text-align: center !important;
    text-wrap: balance;
}

/* Override form.css info text rule: .tailwind-scope .sign-in-info sets Inter.
   Color matched to mockup's gray-500 (#6b7280) — was inheriting near-black. */
.sign-in-split .sign-in-info {
    font-family: var(--sign-in-font) !important;
    color: #6b7280 !important;
    /* gray-500 — matches mockup */
    line-height: 1.6 !important;
    text-align: center !important;
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}


/* --------------------------------------------------------------------------
   1b-ii. Embedded footer links
   --------------------------------------------------------------------------
   Pinned to bottom of the left panel. On short viewports, switches to
   static positioning to avoid overlapping login content.
   -------------------------------------------------------------------------- */

.sign-in-left__footer {
    flex-shrink: 0;
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid #f3f4f6;
    /* gray-100 */
}

.sign-in-left__footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 14px;
    font-family: var(--sign-in-font);
    font-size: 0.75rem;
    color: #9CA3AF;
    /* gray-400 */
}

/* !important needed to beat global a styles. A global inset box-shadow
   (rgb(37, 224, 120) 0px -2px 0px 0px inset) creates green underlines on
   all links — must be explicitly killed here. */
.sign-in-left__footer-inner a {
    color: #9CA3AF !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color 0.15s ease;
}

.sign-in-left__footer-inner a:hover {
    color: #6B7280 !important;
    /* gray-500 */
    text-decoration: none !important;
    box-shadow: none !important;
}

.sign-in-left__footer-inner .footer-separator {
    color: #D1D5DB;
    /* gray-300 */
}


/* --------------------------------------------------------------------------
   1c. Right panel (testimonial carousel)
   --------------------------------------------------------------------------
   Hidden on mobile (<1024px). On desktop, shows a soft eucalyptus gradient
   with a frosted-glass testimonial card centred within.
   -------------------------------------------------------------------------- */

.sign-in-right {
    display: none;
}

@media (min-width: 1024px) {
    .sign-in-right {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 48px 40px;
        position: relative;
        overflow: hidden;

        /* Soft eucalyptus gradient — professional, not garish */
        background:
            radial-gradient(ellipse 120% 80% at 20% 100%, rgba(187, 247, 208, 0.5) 0%, transparent 60%),
            radial-gradient(ellipse 100% 100% at 80% 20%, rgba(74, 222, 128, 0.15) 0%, transparent 50%),
            radial-gradient(ellipse 80% 60% at 50% 50%, rgba(220, 252, 231, 0.4) 0%, transparent 70%),
            linear-gradient(160deg, #f0fdf4 0%, #f8fef9 30%, #f0faf3 60%, #e8f5ec 100%);
    }
}

/* Subtle grain texture overlay for depth */
.sign-in-right::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Decorative soft radial blob for depth */
.sign-in-right::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.06) 0%, transparent 70%);
    top: -100px;
    right: -150px;
    pointer-events: none;
}


/* --------------------------------------------------------------------------
   1d. Frosted-glass testimonial card
   --------------------------------------------------------------------------
   Semi-transparent white card with backdrop blur, wrapping the carousel
   and dot indicators.
   -------------------------------------------------------------------------- */

.testimonial-carousel__card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 40px 32px 32px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.02),
        0 2px 8px rgba(0, 0, 0, 0.03),
        0 12px 40px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 1;
    max-width: 400px;
    width: 100%;
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   1e. CSS-only auto-rotating testimonial carousel
   --------------------------------------------------------------------------
   Four slides staggered across a 40s cycle using a single keyframe.
   Each slide is visible for ~10s (fade in → hold → fade out) before handing
   off to the next. Dot indicators sync via a matching keyframe.
   -------------------------------------------------------------------------- */

/* min-height must accommodate the tallest slide without excessive bottom gap
   on shorter slides. */
.testimonial-carousel {
    position: relative;
    min-height: 275px;
}

/* Each slide is absolutely positioned and fades in/out via animation */
.testimonial-carousel__slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    animation: testimonial-fade 40s infinite;
}

/* Stagger the 4 slides at 10s intervals */
.testimonial-carousel__slide:nth-child(1) {
    animation-delay: 0s;
}

.testimonial-carousel__slide:nth-child(2) {
    animation-delay: 10s;
}

.testimonial-carousel__slide:nth-child(3) {
    animation-delay: 20s;
}

.testimonial-carousel__slide:nth-child(4) {
    animation-delay: 30s;
}

/*
   Keyframe breakdown for a 4-slide, 40s cycle:
   - 0%→4.17%    : fade in  (0s→1s)
   - 2.5%→22.5%  : visible  (1s→9s)
   - 22.5%→25%   : fade out (9s→10s)
   - 25%→100%    : invisible (10s→40s)
*/
@keyframes testimonial-fade {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    2.5% {
        opacity: 1;
        transform: translateY(0);
    }

    22.5% {
        opacity: 1;
        transform: translateY(0);
    }

    25% {
        opacity: 0;
        transform: translateY(-8px);
    }

    100% {
        opacity: 0;
    }
}

/* --- Testimonial slide content styles --- */

.testimonial-carousel__image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.testimonial-carousel__name {
    font-family: var(--sign-in-font);
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 600;
    color: #111827;
    /* gray-900 */
    margin: 0 0 2px;
    text-align: center;
}

.testimonial-carousel__title {
    font-family: var(--sign-in-font);
    font-size: 0.8125rem;
    /* 13px */
    color: #6B7280;
    /* gray-500 */
    margin: 0 0 20px;
    text-align: center;
}

/* Reset any global blockquote styles (Bootstrap / testimonials.css).
   Use !important on margin/border to beat Bootstrap's blockquote defaults. */
.testimonial-carousel__quote {
    font-family: var(--sign-in-font);
    font-size: 0.9375rem;
    /* 15px */
    font-style: italic;
    color: #374151;
    /* gray-700 */
    line-height: 1.7;
    text-align: center;
    margin: 0 !important;
    padding: 0 4px;
    position: relative;
    border: none !important;
    border-left: none !important;
}

/* Decorative open-quote pseudo-element — brand green accent */
.testimonial-carousel__quote::before {
    content: "\201C";
    /* Left double quotation mark */
    font-size: 3.5rem;
    line-height: 1;
    color: #bbf7d0;
    /* green-200 — matches gradient palette */
    position: absolute;
    top: -20px;
    left: -8px;
    font-style: normal;
    font-weight: 700;
}


/* --- Dot indicators --- */

/* Reduced margin-top from 28px to 20px to compensate for the min-height
   gap inherent in absolutely-positioned carousel slides. */
.testimonial-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.testimonial-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #D1D5DB;
    /* gray-300 — inactive */
    border: none;
    padding: 0;
    cursor: default;
    animation: dot-active 40s infinite;
}

/* Stagger dots to sync with their corresponding slide */
.testimonial-carousel__dot:nth-child(1) {
    animation-delay: 0s;
}

.testimonial-carousel__dot:nth-child(2) {
    animation-delay: 10s;
}

.testimonial-carousel__dot:nth-child(3) {
    animation-delay: 20s;
}

.testimonial-carousel__dot:nth-child(4) {
    animation-delay: 30s;
}

/* Dot active keyframe — syncs with the testimonial-fade visible window */
@keyframes dot-active {
    0% {
        background-color: #D1D5DB;
    }

    2.5% {
        background-color: #16A34A;
    }

    /* green-600 — brand green */
    22.5% {
        background-color: #16A34A;
    }

    25% {
        background-color: #D1D5DB;
    }

    100% {
        background-color: #D1D5DB;
    }
}


/* --------------------------------------------------------------------------
   1f. Section heading for right panel
   --------------------------------------------------------------------------
   Small, centred, subtle green text above the carousel card.
   -------------------------------------------------------------------------- */

.testimonial-carousel__section-heading {
    font-family: var(--sign-in-font);
    font-size: 0.6875rem;
    /* 11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(21, 128, 61, 0.6);
    /* green-700 at 60% opacity */
    text-align: center;
    margin-bottom: 24px;
}


/* --------------------------------------------------------------------------
   1g. Staggered entrance animations
   --------------------------------------------------------------------------
   Children of .sign-in-animate slide up with staggered delays. The right
   panel fades in after a 0.35s delay.
   -------------------------------------------------------------------------- */

.sign-in-animate>* {
    opacity: 0;
    transform: translateY(14px);
    animation: sign-in-entrance 0.55s ease-out forwards;
}

/* Stagger each direct child with incremental delays */
.sign-in-animate>*:nth-child(1) {
    animation-delay: 0.05s;
}

.sign-in-animate>*:nth-child(2) {
    animation-delay: 0.12s;
}

.sign-in-animate>*:nth-child(3) {
    animation-delay: 0.19s;
}

.sign-in-animate>*:nth-child(4) {
    animation-delay: 0.26s;
}

.sign-in-animate>*:nth-child(5) {
    animation-delay: 0.33s;
}

.sign-in-animate>*:nth-child(6) {
    animation-delay: 0.40s;
}

@keyframes sign-in-entrance {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Right panel entrance — delayed fade-in from right */
.sign-in-right-animate {
    opacity: 0;
    animation: sign-in-right-entrance 0.7s ease-out 0.35s forwards;
    width: 100%;
    max-width: 400px;
}

@keyframes sign-in-right-entrance {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}