/*
 * EcoLens authentication modal tab fix.
 * Keep this file loaded after app.css.
 */

/* Prevent any display rule in app.css from overriding the hidden attribute. */
[hidden] {
    display: none !important;
}

/* Only the selected authentication form is rendered. */
.auth-form[hidden] {
    display: none !important;
}

/* Keep the modal usable on laptops and smaller screens. */
.auth-modal {
    max-height: min(88vh, 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Keep the tabs visible while a longer registration form is scrolled. */
.auth-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Stronger visual distinction for the selected tab. */
.auth-tabs button {
    cursor: pointer;
}

.auth-tabs button[aria-selected="true"],
.auth-tabs button.active {
    font-weight: 700;
}

/* Avoid retaining scroll position when changing forms. */
.auth-form {
    scroll-margin-top: 90px;
}

@media (max-width: 640px) {
    .auth-modal {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }
}