html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1f324d;
    border-color: #19293f;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

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;
}

/* Custom Form Styles (Material Design inspired, since we use MudBlazor) */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    font-family: Roboto, sans-serif;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #1f324d;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(31, 50, 77, 0.25);
}

.form-check-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    font-family: Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.btn-primary {
    color: #fff;
    background-color: #1f324d;
    border-color: #1f324d;
    display: inline-block;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 4px;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
    cursor: pointer;
    width: 100%;
    font-family: Roboto, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.0892857143em;
}

.btn-primary:hover {
    background-color: #19293f;
    border-color: #19293f;
}

.form-title {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.87);
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-container {
    max-width: 500px;
    margin: 3rem auto;
    padding: 2.5rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3.5px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
}

.form-container-medium {
    max-width: 800px;
    margin: 3rem auto;
    padding: 2.5rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3.5px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
}

.form-link-container {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.form-link {
    color: #1f324d;
    text-decoration: none;
    font-size: 0.875rem;
    font-family: Roboto, sans-serif;
}

.form-link:hover {
    text-decoration: underline;
}

.validation-error {
    color: #f44336;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-family: Roboto, sans-serif;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

.form-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.form-col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.form-col-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

/* Login splash: full-bleed randomised background with a centred card. The background
   image is supplied per-request via the --login-bg custom property (see Login.razor). */
.login-splash {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    background-image: linear-gradient(rgba(15, 24, 38, 0.45), rgba(15, 24, 38, 0.6)), var(--login-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-card {
    margin: 0;
    width: 100%;
}

/* Backdrop shown behind the app nav drawer on mobile for Static SSR (Identity) pages, where the
   drawer is toggled by the JS fallback in App.razor. On Static SSR MudBlazor's runtime breakpoint
   detection doesn't run, so the drawer keeps its *base* z-index (--mud-zindex-drawer, ~1100)
   rather than the responsive (appbar + 2). The backdrop therefore sits just below the drawer base
   so the menu shows above it, and below the app bar so the hamburger stays tappable. */
.mc-drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--mud-zindex-drawer, 1100) - 1);
}

/* On Static SSR pages (e.g. /Account/Manage) MudBlazor's drawer JS never runs, so the responsive
   drawer keeps the 'mud-drawer--initial' class and MudBlazor hides it below the breakpoint with
   `display:none !important`. When our JS fallback opens it (adds 'mud-drawer--open'), force it
   visible. This selector has the same specificity as MudBlazor's hide rule, and app.css is loaded
   after MudBlazor.css, so it wins on source order. The drawer only renders when actually opened
   (closed drawers keep MudBlazor's hidden state), so this doesn't affect the closed state. */
.mud-drawer.mud-drawer-responsive.mud-drawer-pos-left.mud-drawer--open:not(.mud-drawer-mini) {
    display: flex !important;
}

/* Account/Manage section nav (MudToggleGroup). On phones it switches to vertical (the component's
   Vertical parameter, driven by the viewport breakpoint) — make the stacked items fill the width. */
.mc-manage-nav {
    max-width: 100%;
}

.mc-manage-nav.mud-toggle-group-vertical {
    grid-template-columns: minmax(0, 1fr) !important;
}

.login-logo {
    display: block;
    width: 70%;
    height: auto;
    margin: 0 auto 1.5rem;
}

/* Logo centred in the app bar, independent of the left/right controls. Transparent
   white-text asset, so it blends onto the primary-coloured app bar. */
.appbar-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 36px;
}