/* Login / registration pages — loaded only from _LoginLayout */

body.login-page {
    background-color: rgba(221, 221, 221, 0.73);
}

.login-content {
    padding-bottom: 3rem;
}

.login-navbar .navbar-brand {
    float: none;
    margin: 0 auto;
}

.login-navbar .logo-image {
    max-height: 48px;
    width: auto;
}

/* Single chrome for every view rendered inside _LoginLayout. Mirrors the
   legacy 1.0 #login-box look (grey panel, soft shadow, generous padding). */
#login-box {
    box-shadow: 5px 5px 5px grey;
    border: 1px solid grey;
    padding: 2.5em;
    border-radius: 5px;
    background-color: rgba(221, 221, 221, 0.93);
    margin-top: 1rem;
}

#login-box .form-control,
#login-box .form-select {
    margin-bottom: 0.5rem;
}

#login-box .register-submit {
    margin-top: 1rem;
}

.k-checkbox-label:empty {
    display: none;
}

/* Title sits above the box, uppercase letterspaced like the 1.0 page. */
.login-page .section-heading {
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: none;
    padding-bottom: 0;
}

/* Environment badge styles moved to site.css so the badge renders on every
   layout (not just _LoginLayout). Keep this file scoped to login-only chrome. */

/* On phones the panel chrome eats screen real estate and adds nothing.
   Strip the border, shadow, and background, but keep a touch of horizontal
   padding so the fields don't slam into the edges of the glass. */
@media (max-width: 575.98px) {
    #login-box {
        box-shadow: none;
        border: none;
        padding: 0 3rem;
        border-radius: 0;
        background-color: transparent;
        margin-top: 0;
    }
}