/* =====================================================================
   LKL-DAM | Login-only plugin stylesheet — offline proposal
   ResourceSpace 11.0 | Licht Kunst Licht AG

   OFFLINE REVIEW ONLY — not deployed or production-validated.
   Requires plugin hook output: direct children #LoginHeader, optional
   #login-errors, h1.lkl-login-welcome, then form#loginform.
   Requires public /branding/lkl-logo-white.png to exist before activation.
   ===================================================================== */

/* Login view only; native slideshow mode remains untouched. */
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled):has(#loginform) {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background: #111214;
    box-sizing: border-box;
}

/* Full-screen photograph under a 72% dark overlay. The lighter left
   photograph overlays this, keeping the bridge visually continuous. */
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #CentralSpaceLogin {
    display: grid;
    grid-template-columns: 55% 45%;
    /* top spacer, logo, optional error, heading, form, optional SSO link, bottom spacer */
    grid-template-rows: minmax(24px, 1fr) auto auto auto auto auto minmax(24px, 1fr);
    gap: 0;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    box-sizing: border-box;
    color: #f5f5f5;
    background-color: #111214;
    background-image:
        linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, .72)),
        url("/branding/lkl-login-background.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Bright left image, anchored to the left — approved framing. */
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #CentralSpaceLogin::before {
    content: "";
    display: block;
    grid-column: 1;
    grid-row: 1 / -1;
    min-height: 100%;
    background-image:
        linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .20)),
        url("/branding/lkl-login-background.jpg");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Keep the existing native logo link and form together in the right panel. */
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #LoginHeader {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    justify-self: center;
    width: min(520px, calc(100% - 80px));
    max-width: none;
    margin: 0;
    padding: 0 0 20px;
    background: transparent;
    border: 0;
    box-sizing: border-box;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #LoginHeader img.LoginHeaderImg {
    display: block;
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Use official white artwork rather than recolouring the light logo. */
    content: url("/branding/lkl-logo-white.png");
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) form#loginform {
    grid-column: 2;
    grid-row: 5;
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-self: start;
    width: min(520px, calc(100% - 80px));
    max-width: none;
    min-width: 0;
    gap: 20px;
    margin: 0;
    padding: 0;
    color: #f5f5f5;
    box-sizing: border-box;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #login_box {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    color: inherit;
}

/* Native error panel is a direct grid item between logo and heading.
   It stays above the heading and expands the page if necessary. */
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #login-errors {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    width: min(520px, calc(100% - 80px));
    min-width: 0;
    box-sizing: border-box;
}

/* Accessible / translatable heading inserted by loginformlink hook. */
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) h1.lkl-login-welcome {
    grid-column: 2;
    grid-row: 4;
    justify-self: center;
    width: min(520px, calc(100% - 80px));
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 32px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

/* SimpleSAML may print p.external-login-link from the same hook.
   Its own row keeps it under the form and clear of the logo, error, and heading.
   An absent paragraph leaves this auto row at zero height. */
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #CentralSpaceLogin > p.external-login-link {
    grid-column: 2;
    grid-row: 6;
    justify-self: center;
    align-self: start;
    width: min(520px, calc(100% - 80px));
    min-width: 0;
    margin: 16px 0 0;
    box-sizing: border-box;
    color: #d8e6ff;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #CentralSpaceLogin > p.external-login-link a {
    color: #d8e6ff;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform label,
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform .field-input {
    color: #f0f0f0;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform input[type="text"],
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform input[type="email"],
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform input[type="password"],
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    background-color: #292a2d;
    color: #fff;
    border: 1px solid #47484b;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Keep the core select arrow. background-color does not clear it, and the
   extra right padding keeps the label clear of that arrow. */
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform select {
    background-color: #292a2d;
    padding-right: 36px;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform input:focus-visible,
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform select:focus-visible,
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform button:focus-visible,
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform a:focus-visible {
    outline: 2px solid #b8d1ff;
    outline-offset: 2px;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #login_box input[type="submit"],
#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #login_box button[type="submit"] {
    background: #fff;
    color: #151515;
    border: 0;
    border-radius: 24px;
    padding: 10px 24px;
    font-weight: 500;
    cursor: pointer;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform a {
    color: #d8e6ff;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #loginform a:hover {
    color: #fff;
}

#UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #login-footer {
    color: #b8b8b8;
    opacity: 1;
}

/* Mobile/tablet: photograph above the native form, no dark photo
   behind fields; allow scrolling on short or small screens. */
@media (max-width: 900px) {
    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled):has(#loginform) {
        display: block;
        width: 100%;
        min-height: 100dvh;
        margin: 0;
        padding: 0;
        background: #111214;
    }

    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #CentralSpaceLogin {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        background: #111214;
    }

    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #CentralSpaceLogin::before {
        display: block;
        width: 100%;
        height: 30vh;
        min-height: 180px;
        max-height: 300px;
        flex-shrink: 0;
        background-position: left center;
        background-size: cover;
    }

    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #LoginHeader {
        width: 100%;
        max-width: none;
        align-self: stretch;
        justify-self: auto;
        padding: 24px 26px 12px;
        margin: 0;
        box-sizing: border-box;
    }

    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #LoginHeader img.LoginHeaderImg {
        max-width: 110px;
        max-height: 110px;
    }

    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled) form#loginform {
        gap: 14px;
        width: 100%;
        max-width: none;
        align-self: stretch;
        justify-self: auto;
        padding: 0 26px 36px;
        margin: 0;
        box-sizing: border-box;
    }

    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled) h1.lkl-login-welcome {
        width: 100%;
        align-self: stretch;
        margin: 0 0 20px;
        padding: 0 26px;
        font-size: 23px;
    }

    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #login-errors {
        width: 100%;
        padding: 0 26px;
    }

    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #CentralSpaceLogin > p.external-login-link {
        width: 100%;
        align-self: stretch;
        margin: 0;
        padding: 0 26px 16px;
    }

    #UICenter.NoSearch.LoginPage:not(.slideshow-enabled) #login-footer {
        text-align: center;
        line-height: 1.5;
        padding: 12px 0;
    }
}


/* LKL: hide login attribution footer */
#CentralSpaceLogin #login-footer {
    display: none !important;
}