/* Login page layout — loaded after Tailwind bundle */
/* Fit one screen: no page scroll, content scales with viewport */
html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.auth-page-root {
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.auth-page-wrap {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: clamp(0.4rem, 1.8vmin, 1.25rem) clamp(0.5rem, 2vw, 1rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    flex: 1 1 auto;
}

.auth-card {
    width: 100%;
    max-width: 72rem;
    min-height: min(90dvh, 50rem);
    max-height: calc(100dvh - clamp(0.5rem, 2vmin, 1.5rem));
    margin-left: auto;
    margin-right: auto;
    padding: clamp(0.5rem, 1.8vmin, 1.1rem) clamp(0.65rem, 2vw, 1.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.auth-grid {
    align-items: stretch;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.auth-col-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.auth-logo-row {
    margin-bottom: clamp(0.5rem, 1.5vmin, 1rem);
}

.auth-form-inner {
    padding: clamp(0.75rem, 2.2vmin, 2rem) clamp(0.85rem, 2vw, 2.25rem) clamp(0.85rem, 2.5vmin, 2.25rem);
    box-sizing: border-box;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .auth-form-inner {
        padding: clamp(1rem, 2.5vmin, 2.5rem) clamp(1.25rem, 2.2vw, 2.5rem) clamp(1rem, 2.8vmin, 2.75rem);
    }
}

.auth-form-mt {
    margin-top: clamp(1rem, 3vmin, 2.5rem);
}

.auth-forgot {
    margin-top: clamp(1rem, 2.5vmin, 2rem);
    margin-bottom: clamp(0.5rem, 1.5vmin, 1rem);
    cursor: pointer;
}

.auth-col-slider {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.auth-col-slider-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: clamp(0.75rem, 2vmin, 2rem) clamp(0.85rem, 2vw, 2.25rem);
    box-sizing: border-box;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .auth-col-slider-inner {
        padding: clamp(1rem, 2.5vmin, 2.25rem) clamp(1.25rem, 2.2vw, 2.5rem);
    }

    .auth-slider-col {
        margin-top: 0;
        /* border-left: 1px solid rgb(226 232 240 / 0.85); */
    }
}

.auth-slider-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

.auth-slider-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.auth-slider-viewport img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
    object-position: bottom center;
}

/* width < 640px */
@media (max-width: 639px) {
    .auth-slider-viewport {
        height: clamp(8rem, 38vmin, 18rem);
        min-height: 8rem;
        max-height: 40vh;
    }
}

/* 640px ≤ width < 1024px */
@media (min-width: 640px) and (max-width: 1023px) {
    .auth-slider-viewport {
        height: clamp(9rem, 32vmin, min(24rem, 42dvh));
        min-height: 9rem;
        max-height: 44vh;
    }
}

/* width ≥ 1024px */
@media (min-width: 1024px) {
    .auth-slider-viewport {
        height: min(54vh, 38rem);
        min-height: 22rem;
        max-height: min(620px, 80vh);
    }
}

/* Short window height */
@media (max-height: 640px) {
    .auth-form-inner {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .auth-form-mt {
        margin-top: 0.65rem;
    }

    .auth-forgot {
        margin-top: 2.65rem;
        margin-bottom: 0.35rem;
    }
}

/* Short desktop: shrink slider */
@media (min-width: 1024px) and (max-height: 640px) {
    .auth-slider-viewport {
        height: clamp(25.5rem, 28vh, 14rem);
        min-height: 25.5rem;
        max-height: 32vh;
    }
}

/* Announcement / ticker under the login grid */
.moving-text {
    flex-shrink: 0;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.45rem 0.75rem;
    box-sizing: border-box;
    border-radius: 0 0 0.5rem 0.5rem;
    border-top: 1px solid rgb(226 232 240 / 0.9);
    background: rgb(248 250 252 / 0.85);
    overflow: hidden;
}

.moving-text marquee {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: rgb(51 65 85);
}

html.dark .moving-text {
    border-top-color: rgb(255 255 255 / 0.12);
    background: rgb(15 23 42 / 0.35);
}

html.dark .moving-text marquee {
    color: rgb(226 232 240);
}

html.dark .auth-slider-col {
    border-left-color: rgb(255 255 255 / 0.12);
}