/* Auth Pages Styles */

/* Reset for auth pages */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ── Entrance Keyframes (CSS fill-mode:both = no flicker) ─── */
@keyframes auth-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes auth-fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes auth-slideLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Micro-interaction Keyframes (validation, alerts) ─────── */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 40px;
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}

/* ── Auth Layout - Full Screen ───────────────────────────── */
/* Three fixed layers the page scrolls over: the poster still (shown until the video can play,
   and always for reduced motion), the looping aerial video, then a dark scrim for legibility. */
.auth-wrapper {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.auth-wrapper::before,
.auth-wrapper::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.auth-wrapper::before {
    z-index: -3;
    /* Dark behind the still until it arrives, so the page never flashes a grey half-screen. */
    background: var(--auth-bg-image) center 35% / cover no-repeat, var(--bs-dark);
}

/* ── Splash — held until the background still has decoded (capped in _AuthLayout) ── */
.auth-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-dark);
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.auth-splash .brand-loader {
    font-size: 72px;
    color: var(--bs-white);
}

.auth-ready .auth-splash {
    opacity: 0;
    visibility: hidden;
}

/* Entrance animations wait behind the splash, so they play when the screen appears. */
html:not(.auth-ready) .auth-wrapper * {
    animation-play-state: paused;
}

/* A signed-in visitor is about to be redirected; hide the form rather than flash it. */
.auth-checking-session .auth-content {
    opacity: 0;
    visibility: hidden; /* also out of the tab order and away from screen readers */
}

.auth-bg-video {
    position: fixed;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    pointer-events: none;
}

.auth-wrapper::after {
    z-index: -1;
    background: rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg-video { display: none; }
}

/* ── Header ──────────────────────────────────────────────── */
.auth-header {
    /* Above the content: the card's entrance animation leaves a transform on it, which makes it a
       later stacking context that would otherwise paint over the header's dropdowns. */
    position: relative;
    z-index: 10;
    background: transparent;
    padding: 0.75rem 0;
    flex-shrink: 0;
    animation: auth-fadeIn 0.4s ease-out both;
}

.auth-header .navbar-brand {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
}

.auth-header .nav-link {
    color: #fff !important;
    font-weight: 500;
    margin-inline-start: 1.5rem;
    transition: color 0.2s ease;
}

.auth-header .nav-link:hover {
    color: var(--bs-primary) !important;
}

/* Language picker in the header: the app header's picker (language-picker.css), dressed as one of
   the white header links over the photo. The menu itself keeps the shared surface. */
.language-picker-auth .language-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
}

/* Open state stays white: primary blue on the sunset photo was barely readable. */
.language-picker-auth .language-picker-trigger[aria-expanded="true"] {
    background: none;
}

.language-picker-auth .language-picker-trigger:focus-visible {
    border-radius: 6px;
}

.language-picker-auth .language-picker-menu {
    margin-top: 8px !important;
}

/* ── Main Content ────────────────────────────────────────── */
/* No inner scroller: a centred flex child that overflows clips its top out of scroll reach
   ("Welcome Back!" was cut off). Auto margins centre when there is room and let the page
   scroll from the top when there is not. */
.auth-content {
    flex: 1;
    display: flex;
    padding: 1rem 0;
    transition: opacity 0.3s ease, visibility 0s;
}

.auth-content > .container,
.auth-content > .container-fluid {
    margin-block: auto;
}

/* ── Left Side - Hero Content (animated) ─────────────────── */
.auth-hero {
    color: #fff;
    padding: 2rem;
    animation: auth-slideLeft 0.5s ease-out 0.1s both;
}

.auth-hero .badge-text {
    color: var(--bs-primary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    display: inline-block;
    animation: auth-slideLeft 0.4s ease-out 0.2s both;
}

.auth-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    /* Sits over the aerial photo — force white + a soft scrim so it stays legible on lighter areas. */
    color: #fff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
    animation: auth-slideLeft 0.4s ease-out 0.3s both;
}

.auth-hero h1 .highlight {
    color: var(--bs-primary);
}

.auth-hero p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2rem;
    animation: auth-slideLeft 0.4s ease-out 0.4s both;
}

.auth-hero .btn-primary {
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.auth-hero .btn-primary:hover {
    transform: translateY(-2px);
}

.auth-hero .btn-outline-light {
    border-width: 2px;
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.auth-hero .btn-outline-light:hover {
    background: #fff;
    color: #333;
}

/* ── Right Side - Auth Card (animated) ───────────────────── */
.auth-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    animation: auth-fadeUp 0.5s ease-out 0.1s both;
}

/* Glassmorphism Card */
.auth-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
}

.auth-card h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 0.5rem;
}

.auth-card .subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/* ── Form Styles ─────────────────────────────────────────── */
.auth-form .form-group {
    margin-bottom: 1rem;
    transition: transform 0.15s ease;
    animation: auth-fadeUp 0.3s ease-out both;
}
.auth-form .form-group:nth-child(1) { animation-delay: 0.15s; }
.auth-form .form-group:nth-child(2) { animation-delay: 0.20s; }
.auth-form .form-group:nth-child(3) { animation-delay: 0.25s; }
.auth-form .form-group:nth-child(4) { animation-delay: 0.30s; }
.auth-form .form-group:nth-child(5) { animation-delay: 0.35s; }
.auth-form .form-group:nth-child(6) { animation-delay: 0.40s; }

/* Side by side inputs for signup */
.auth-form .row .input-group {
    border-radius: 50px;
}

.auth-form .row .input-group-text {
    padding-block: 0.75rem;
    padding-inline: 1rem 0.4rem;
}

.auth-form .row .form-control {
    padding-block: 0.75rem;
    padding-inline: 0.25rem 0.75rem;
    font-size: 0.9rem;
}

.auth-form .input-group {
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.auth-form .input-group:focus-within {
    box-shadow: 0 2px 15px rgba(var(--bs-primary-rgb), 0.3);
    transform: translateY(-1px);
}

.auth-form .input-group-text {
    background: #fff;
    border: none;
    padding-block: 0.875rem;
    padding-inline: 1.25rem 0.5rem;
    color: rgba(33, 37, 41, 0.6);
    transition: color 0.2s ease;
}

.auth-form .input-group:focus-within .input-group-text {
    color: var(--bs-primary);
}

.auth-form .input-group-text i {
    font-size: 1.1rem;
}

.auth-form .form-control {
    border: none;
    padding: 0.875rem 0.5rem;
    font-size: 1rem;
    background: #fff;
    transition: background 0.2s ease;
}

.auth-form .form-control:focus {
    box-shadow: none;
    background: #fff;
}

.auth-form .form-control::placeholder {
    color: rgba(33, 37, 41, 0.6);
    transition: opacity 0.2s ease;
}

.auth-form .form-control:focus::placeholder {
    opacity: 0.5;
}

/* Toggle password button */
.auth-form .input-group .btn {
    background: #fff;
    border: none;
    padding-block: 0.875rem;
    padding-inline: 0.5rem 1.25rem;
    color: rgba(33, 37, 41, 0.6);
    transition: color 0.15s ease;
}

.auth-form .input-group .btn:hover {
    color: #333;
}

.forgot-password {
    text-align: end;
    margin-bottom: 1rem;
}

.forgot-password a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.forgot-password a:hover {
    color: var(--bs-primary);
}

/* ── Buttons (animated) ──────────────────────────────────── */
/* Primary action in brand blue: a dark button disappears into the dark glass card and lets the
   white Google button read as the main action. */
.auth-form .btn-dark {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    animation: auth-fadeUp 0.3s ease-out 0.4s both;
}

.auth-form .btn-dark:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.auth-form .btn-dark:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.auth-form .btn-dark:disabled {
    cursor: not-allowed;
    transform: none;
}

.signup-link {
    text-align: center;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    animation: auth-fadeIn 0.3s ease-out 0.5s both;
}

.signup-link a {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.signup-link a:hover {
    text-decoration: underline;
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    margin: 0.75rem 0;
    animation: auth-fadeIn 0.3s ease-out 0.45s both;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.divider span {
    padding: 0 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/* Social Buttons */
.auth-form .btn-light {
    width: 100%;
    padding: 0.875rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    margin-bottom: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: auth-fadeUp 0.3s ease-out 0.5s both;
}

.auth-form .btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.auth-form .btn-light:active {
    transform: translateY(0) scale(0.98);
}

.auth-form .btn-light img,
.auth-form .btn-light svg {
    width: 20px;
    height: 20px;
}

/* ── Field-level Validation Errors (shared) ──────────────── */
.field-error,
.ob-error {
    color: #f87171;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: none;
    padding-inline-start: 1.25rem;
}

/* Animate error text appearing */
.field-error[style*="display: block"],
.ob-error[style*="display: block"] {
    animation: slideDown 0.25s ease-out;
}

.field-invalid .input-group,
.ob-invalid .input-group,
.ob-invalid .ob-dropdown-toggle {
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.35) !important;
    animation: shake 0.35s ease-out;
}

.ob-invalid .ob-team-option label {
    border-color: rgba(248, 113, 113, 0.5);
}

/* ── Alert Messages (animated) ───────────────────────────── */
.alert-auth {
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    /* Provider errors can carry an unbroken URL — keep them inside the card instead of
       widening it. Pairs with friendlyAuthError(), which already strips the raw text. */
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.alert-auth:not(.d-none) {
    animation: slideDown 0.3s ease-out;
}

.alert-auth.alert-danger {
    background: rgba(220, 53, 69, 0.9);
    border: none;
    color: #fff;
}

.alert-auth.alert-success {
    background: rgba(40, 167, 69, 0.9);
    border: none;
    color: #fff;
}

/* Session ended by the idle timer / an expired token — informational, not a failure. */
.alert-auth.alert-warning {
    background: rgba(217, 119, 6, 0.92);
    border: none;
    color: #fff;
}

/* ── Loading Spinner ─────────────────────────────────────── */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    margin-inline-end: 0.5rem;
}

/* ── Text colors for glass card ──────────────────────────── */
.auth-card .text-center {
    color: rgba(255, 255, 255, 0.9);
}

.auth-card p {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Responsive Design ───────────────────────────────────── */
@media (max-width: 991.98px) {
    .auth-hero {
        text-align: center;
        padding: 3rem 1rem 2rem;
    }

    .auth-hero h1 {
        font-size: 2rem;
    }

    .auth-hero .btn-group-custom {
        justify-content: center;
    }

    .auth-card-wrapper {
        padding: 1rem;
    }

    .auth-card {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 575.98px) {
    .auth-hero h1 {
        font-size: 1.75rem;
    }

    .auth-hero p {
        font-size: 0.9rem;
    }

    .auth-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    .auth-card h2 {
        font-size: 1.75rem;
    }

    .auth-header .nav-link {
        margin-inline-start: 0;
        padding: 0.5rem 0;
    }
}

/* Hide hero on very small screens for login focus */
@media (max-width: 767.98px) {
    .auth-hero {
        display: none;
    }

    .auth-content {
        justify-content: center;
    }

    .auth-card-wrapper {
        width: 100%;
    }
}

/* ── Prefers reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
    }
}

/* ── Desktop fit (must stay last: overrides the base sizes above) ── */
/* Desktop: header, content and the feature strip must fit one screen without scrolling.
   Hero and card sizes scale with viewport height so short laptop screens (and browser zoom)
   shrink the content instead of overflowing it. */
@media (min-width: 992px) {
    .auth-header { padding-block: clamp(0.25rem, 1vh, 0.75rem); }

    .auth-content { padding-block: 1vh 0.5vh; }

    /* Equal side margins: hero text starts on the logo's left edge, the card ends on the
       container's right edge (under "Help"). The column gutter is the only inset on both sides. */
    .auth-hero { padding: 0 0.75rem; }
    .auth-hero .badge-text { margin-bottom: 1.2vh; }
    .auth-hero h1 { font-size: clamp(1.5rem, 4.4vh, 2.5rem); margin-bottom: 2vh; }
    .auth-hero p { font-size: clamp(0.85rem, 2vh, 1rem); margin-bottom: 3vh; }
    .auth-hero .btn-primary,
    .auth-hero .btn-outline-light { padding-block: clamp(0.45rem, 1.3vh, 0.75rem); }

    /* Beside the hero, the card's right edge lines up with the header's last link. */
    .auth-hero + .auth-card-wrapper {
        justify-content: flex-end;
        padding-inline: 0.75rem;
    }

    .auth-card {
        padding: clamp(1rem, 3.2vh, 2.5rem) clamp(1.25rem, 2vw, 2rem);
        max-width: clamp(340px, 26vw, 420px);
    }
    .auth-card h2 { font-size: clamp(1.3rem, 3.6vh, 2rem); margin-bottom: 0.5vh; }
    .auth-card .subtitle { font-size: clamp(0.85rem, 1.9vh, 1rem); margin-bottom: 2vh; }
    .auth-form .form-group { margin-bottom: 1.4vh; }
    .auth-form .input-group-text { padding-block: clamp(0.45rem, 1.4vh, 0.875rem); }
    .auth-form .form-control { padding-block: clamp(0.45rem, 1.4vh, 0.875rem); }
    .auth-form .input-group .btn { padding-block: clamp(0.45rem, 1.4vh, 0.875rem); }
    .auth-form .btn-dark,
    .auth-form .btn-light { padding-block: clamp(0.45rem, 1.4vh, 0.875rem); }
    .auth-form .btn-dark { margin-bottom: 1vh; }
    .forgot-password { margin-bottom: 1.4vh; }
    .signup-link { margin-bottom: 1vh; }
    .divider { margin-block: 1vh; }
}

/* Build badge sits bottom-centre: the corners belong to the banner's tagline and icon strip. */
.auth-version {
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ── Feature strip (desktop) ─────────────────────────────── */
/* Replicates the tagline + icon row from the banner artwork as live markup, so it stays sharp and
   whole whatever the video's crop. Sizes follow viewport width, as they would inside the image,
   capped by height so short screens keep the page from scrolling. */
.auth-strip {
    display: none;
}

@media (min-width: 992px) {
    .auth-strip {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        flex-shrink: 0;
        padding-block: 0.5rem clamp(0.75rem, 2.5vh, 1.5rem);
        padding-inline: 3vw 2.25vw;
        color: rgba(255, 255, 255, 0.92);
        font-weight: 400;
        animation: auth-fadeIn 0.6s ease-out 0.3s both;
    }

    /* The artwork darkens toward its bottom edge behind the row. */
    .auth-strip::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 24vh;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    }

    .auth-tagline {
        border-inline-start: 0.3vw solid var(--bs-info);
        padding-block: 0.5vw;
        padding-inline: 1.4vw 0;
        font-size: clamp(0.8rem, min(1.1vw, 1.9vh), 1.3rem);
        font-weight: 400;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        line-height: 1.2;
    }

    /* Dark panel behind the icons, fading in from the start side like the artwork. */
    .auth-features {
        display: flex;
        align-items: stretch;
        margin: 0;
        padding-block: min(0.7vw, 1.1vh);
        padding-inline: 4vw 1vw;
        list-style: none;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 22%, rgba(0, 0, 0, 0.7));
        border-radius: 0.5vw;
    }

    .auth-features li {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.55vw;
        min-width: clamp(6rem, 8.5vw, 10rem);
        padding: 0.2vw 1.3vw;
        text-align: center;
        font-size: clamp(0.58rem, min(0.76vw, 1.35vh), 0.9rem);
        font-weight: 400;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1.25;
    }

    .auth-features li + li {
        border-inline-start: 1px solid rgba(255, 255, 255, 0.45);
    }

    /* A text may carry its own line break ("Better
Collaboration"), set where it reads best. */
    .auth-features span {
        white-space: pre-line;
    }

    .auth-features svg {
        width: clamp(1.6rem, min(2.6vw, 4.4vh), 3.2rem);
        height: auto;
    }
}

/* ── Right-to-left (Arabic) ──────────────────────────────── */
/* Everything above is written in start/end terms and mirrors on its own. What cannot: the entrance
   slide and the strip's fade, which are physical directions, and letter-spacing, which pulls
   Arabic's joined letters apart. */
@keyframes auth-slideStart-rtl {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

[dir="rtl"] .auth-hero,
[dir="rtl"] .auth-hero .badge-text,
[dir="rtl"] .auth-hero h1,
[dir="rtl"] .auth-hero p {
    animation-name: auth-slideStart-rtl;
}

@media (min-width: 992px) {
    [dir="rtl"] .auth-features {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 22%, rgba(0, 0, 0, 0.7));
    }
}

[dir="rtl"] .auth-tagline,
[dir="rtl"] .auth-features li {
    letter-spacing: 0;
}