/* WeldGrid — login responsiveness for laptop screens.
 *
 * The login layout itself lives in the shared, external
 * https://assets.c2s.gr/css/style-login.css, which is outside this
 * repository and shared with other C2S products, so it cannot be edited.
 * This file is the local override and MUST stay last in index.php.
 *
 * THE PROBLEM (measured at 1366x650, the real usable viewport of a 14"
 * laptop once browser chrome is subtracted):
 *   .login-container   697px tall in a 650px viewport
 *   .login-container   overflow-y: hidden  ->  the excess was CLIPPED,
 *                      not scrollable, so the submit button and the
 *                      footer links were simply unreachable
 *   footer             169px, and it sits INSIDE the card
 *   .cookie-consent    145px, position: fixed, covering the submit button
 *
 * THE FIX: bound the card to the viewport, give the form column its own
 * internal scroll, compact the vertical rhythm on short viewports, and
 * reserve room at the bottom so the fixed cookie banner never covers the
 * last control.
 *
 * Uses dvh so mobile browser toolbars do not re-introduce the clipping.
 * ==================================================================== */

:root {
    /* Per-SIDE breathing room. The card carries this as a margin top and
     * bottom, so every height calc below subtracts it twice. */
    --wg-login-gutter: 2rem;
    --wg-login-cookie-reserve: 0px;
}

/* The banner is fixed and overlays the card, so the scroll area has to end
 * above it. Cleared by js/wg-login.js once the banner is dismissed. */
body.wg-login-cookie-open {
    --wg-login-cookie-reserve: 9.5rem;
}

/* ---- 1. Bound the card to the viewport ---------------------------- */
.login-container {
    /* The external sheet hardcodes a 32px margin. It has to be driven by the
     * same variable as the height calc, otherwise the compact breakpoints
     * below shrink the calc while the real margin stays 32px and the page
     * overflows by the difference. */
    margin-top: var(--wg-login-gutter) !important;
    margin-bottom: var(--wg-login-gutter) !important;
    max-height: calc(100dvh - (2 * var(--wg-login-gutter))) !important;
    overflow: hidden !important;
}

/* ---- 2. The form column scrolls internally ------------------------ *
 * This is what the card was missing: the content is allowed to exceed
 * the card, and the user scrolls it instead of losing it.             */
/* NOTE: `display` is deliberately NOT set here. `.login-form` is applied to
 * every panel of this page (login, signup, lost password, contact, help,
 * terms) and only one is shown at a time — the others are hidden with an
 * inline `display:none` written by jQuery. A `display:flex !important` here
 * outranks that inline style and reveals all of them at once. */
.login-container .login-form {
    min-height: 0 !important;
    max-height: calc(100dvh - (2 * var(--wg-login-gutter))) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--wg-navy-900, #0a2b49) var(--wg-steel-100, #e9f0f4);
}

.login-container .login-form::-webkit-scrollbar { width: 8px; }
.login-container .login-form::-webkit-scrollbar-track {
    background: var(--wg-steel-100, #e9f0f4);
}
.login-container .login-form::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--wg-navy-900, #0a2b49);
}

/* Room for the fixed cookie banner, so the submit button stays reachable. */
.login-container .login-form > footer,
.login-container .login-form .footer {
    padding-bottom: calc(20px + var(--wg-login-cookie-reserve)) !important;
}

/* The image column must not force the card taller than the form needs. */
.login-container .login-image {
    min-height: 0 !important;
    align-self: stretch !important;
}

/* ---- 3. Compact rhythm on short viewports ------------------------- *
 * Height-based, not width-based: a 1920x720 window has the same problem
 * as a 1366x650 one, and a 1366x1050 portrait panel has none.         */
@media (max-height: 860px) {
    :root { --wg-login-gutter: 1.25rem; }

    .login-container .login-form-padding {
        padding: 22px 32px 8px !important;
    }

    .login-container .login-form h1,
    .login-container .login-form h2 {
        margin-bottom: 0.35rem !important;
        font-size: clamp(1.35rem, 2.2vh, 1.9rem) !important;
    }

    .login-container .login-form-padding > p {
        margin-bottom: 0.6rem !important;
        font-size: 0.86rem !important;
        line-height: 1.35 !important;
    }

    .login-container .login-form .form-group,
    .login-container .login-form .mb-3 {
        margin-bottom: 0.6rem !important;
    }

    .login-container .login-form footer,
    .login-container .login-form .footer {
        padding-top: 12px !important;
        padding-bottom: calc(12px + var(--wg-login-cookie-reserve)) !important;
    }
}

@media (max-height: 700px) {
    :root { --wg-login-gutter: 0.75rem; }

    .login-container .login-form-padding {
        padding: 16px 26px 6px !important;
    }

    .login-container .login-form-padding > p {
        margin-bottom: 0.45rem !important;
    }

    .login-container .login-form .form-group,
    .login-container .login-form .mb-3 {
        margin-bottom: 0.45rem !important;
    }

    /* The footer links wrap instead of demanding a 169px block. */
    .login-container .login-form footer,
    .login-container .login-form .footer {
        padding: 10px 26px calc(10px + var(--wg-login-cookie-reserve)) !important;
        font-size: 0.8rem !important;
    }
}

/* ---- 4. Never let the page itself scroll sideways ------------------ */
body {
    overflow-x: hidden;
}

/* ====================================================================
 * 5. Intro / splash («ΕΚΚΙΝΗΣΗ ΠΛΑΤΦΟΡΜΑΣ WELDGRID»)
 *
 * Measured at 1366x600:
 *   .intro_video      563px tall, fixed  ->  pushed its own container to
 *                     top:-25px and the stack to 649px in a 600px viewport
 *   #warning          top 605  ->  the status line was entirely offscreen
 *   #cookie-consent   z-index 9999, fixed  ->  painted over the loading
 *                     text at 538-562
 *
 * The video is the only flexible element in the stack, so it is the one
 * that gives way: it is capped in dvh and keeps its aspect ratio, which
 * leaves the title, the progress bar and the status line always visible.
 * ================================================================== */

.preloader .container {
    max-height: 100dvh !important;
    padding-block: 0.75rem !important;
    gap: 0.6rem !important;
    overflow: hidden !important;
}

.preloader .intro_video {
    /* Whatever is left after the loader block and the container padding.
     * `width` must go to auto as well: the external sheet pins it at 1000px,
     * so capping only the height letterboxed the frame and exposed the
     * element's own background as two orange bars beside the artwork. */
    max-height: min(52dvh, 563px) !important;
    max-width: min(100%, 1000px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
}

/* The loader block is the content that must never be sacrificed. */
.preloader #loader {
    flex: 0 0 auto !important;
}

.preloader #warning {
    margin-bottom: 0 !important;
}

@media (max-height: 760px) {
    .preloader .intro_video { max-height: 44dvh !important; }
    .preloader .container   { gap: 0.4rem !important; }
    .preloader .loading-text { font-size: clamp(0.8rem, 1.6vh, 1rem) !important; }
}

@media (max-height: 640px) {
    .preloader .intro_video { max-height: 36dvh !important; }
    .preloader .container   { padding-block: 0.4rem !important; }
}

/* The consent banner sits at z-index 9999 and was painting over the splash.
 * The splash is transient, so it takes precedence while it is up; once it
 * is removed the banner behaves exactly as before. */
.preloader {
    z-index: 10050 !important;
}