h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---------- App bar brand ----------

   The frosted pill GMLx Central uses for its own name, so the header of either application reads the
   same way. The values are that button's; only the component underneath differs, Radzen there and
   MudBlazor here. Doubled with .mud-button-root because MudBlazor brings its own padding and its own
   hover tint, and this has to outrank both rather than sit alongside them. */
.home-brand-btn.mud-button-root {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 2px 14px;
    text-transform: none;
    transition: background 0.15s ease;
}

.home-brand-btn.mud-button-root:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Test environment only: the same pill in light red, so a tab pointing at the test database is never
   mistaken for the live one. Ordered after the rules above so it wins on equal specificity. */
.home-brand-btn.home-brand-test {
    background: rgba(248, 113, 113, 0.85);
    border-color: rgba(255, 255, 255, 0.45);
}

.home-brand-btn.home-brand-test:hover {
    background: rgba(248, 113, 113, 1);
}

/* ---------- The two pages seen before the board: sign in, and choosing a location ----------

   Shared here rather than scoped per page, because both wear the same GMLx panel and a copy in each
   would let them drift. The blue is #0548CB, the Primary in VanGoTheme and in GMLx Central, and the
   photo and logo are GMLx Central's own, so arriving at Van Go does not feel like leaving GMLx. */

/* Reversed rather than reordered in the markup, so both pages flip together and neither has to know
   which side it is on. The photo sits on the right here and on the left in GMLx Central: same brand,
   mirrored, so a glance tells you which application you are signing in to. */
.auth-split {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: row-reverse;
}

.auth-brand {
    position: relative;
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Photo, blue wash, then words: three layers, so the text stays readable whatever the photograph is
   doing behind it. */
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/gmlx-login-image-van.jpg') center / cover no-repeat;
}

.auth-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(5, 72, 203, 0.92) 0%, rgba(3, 40, 110, 0.82) 100%);
}

.auth-brand-content {
    position: relative;
    z-index: 1;
    max-width: 460px;
    padding: 48px;
    color: #ffffff;
}

.auth-brand-title {
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.1;
    margin: 0 0 18px;
}

.auth-brand-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: 0.92;
    margin: 0;
}

.auth-pane {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The pane scrolls, not the page: the split is fixed to the viewport, and a short phone screen
       still has to reach the sign-in button. */
    overflow-y: auto;
    padding: 32px;
    /* Glow in the outer top corner, so it falls away from the photo instead of pooling against it.
       Mirrored with the panel: top left here, where GMLx Central has it top right. */
    background:
        radial-gradient(110% 75% at 0% 0%, rgba(5, 72, 203, 0.10) 0%, rgba(5, 72, 203, 0) 60%),
        #f7f9fc;
}

.auth-card {
    width: 100%;
    max-width: 380px;
}

/* Wider than the sign-in card so three location tiles sit on one row before wrapping. */
.auth-card-wide {
    max-width: 620px;
}

.auth-logo {
    display: block;
    width: 150px;
    height: auto;
    margin-bottom: 28px;
}

.auth-card-wide .auth-logo {
    margin-left: auto;
    margin-right: auto;
}

.auth-title {
    font-weight: 600;
    font-size: 1.65rem;
    color: #1c2b3a;
    margin: 0 0 6px;
}

.auth-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 28px;
}

/* Tiles wrap and stay centred, including a short last row, which a full-width stack cannot do. The
   basis is fixed rather than grown, so one location left over on its own line is still tile-sized
   and not stretched across the card. */
.auth-locations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.auth-location {
    flex: 0 1 170px;
    padding: 14px 12px !important;
    border-radius: 10px !important;
    text-transform: none !important;
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.auth-location:hover:not(:disabled) {
    border-color: #0548cb;
    box-shadow: 0 4px 12px rgba(5, 72, 203, 0.12);
    transform: translateY(-1px);
}

/* Its own flex column rather than MudBlazor's button label, so the two lines do not depend on that
   element keeping its current markup. */
.auth-location-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.auth-location-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1c2b3a;
    line-height: 1.25;
}

.auth-location-meta {
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
}

/* No room for the photo on a phone; the form is the whole point of the page. */
@media (max-width: 820px) {
    .auth-brand {
        display: none;
    }

    .auth-pane {
        flex: 1 1 100%;
        padding: 24px;
    }
}