.content {
    padding-top: 1.1rem;
    /* Room under the last control so a button at the very end of a long form (Save, Done) is never
       flush against the bottom edge of a short window. */
    padding-bottom: 3rem;
}

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."
    }

/* ==========================================================================
   Accessibility: WCAG 2.1 AA contrast fixes for the Bootswatch Journal theme.

   Journal's default --bs-border-color (#dee2e6 on white) computes to only
   ~1.3:1 contrast, far under the 3:1 WCAG 1.4.11 requires for UI component
   boundaries. Checkboxes, radios, switches, .form-select, and table borders
   all inherit that one variable, which is why checkbox outlines in particular
   were hard to see -- overriding it once fixes every one of those controls
   app-wide instead of patching each control separately. Supersedes the old,
   narrower .darker-border-checkbox workaround (an even lighter #929292) that
   used to be hand-applied to just the Login page's "Remember me" checkbox.
   ========================================================================== */

:root {
    --bs-border-color: #767676;
}

/* .btn-outline-secondary's stock #aaa border/text (~2.3:1) is the app's most-
   used "washed out gray outline" control (Edit/Cancel/Back buttons on nearly
   every page) -- same problem, same fix, reusing the same accessible gray so
   every outline control reads consistently. */
.btn-outline-secondary {
    --bs-btn-color: #767676;
    --bs-btn-border-color: #767676;
    --bs-btn-hover-bg: #767676;
    --bs-btn-hover-border-color: #767676;
    --bs-btn-active-bg: #767676;
    --bs-btn-active-border-color: #767676;
    --bs-btn-disabled-color: #767676;
    --bs-btn-disabled-border-color: #767676;
}

/* .btn-outline-danger's stock border (~2.7:1, used for every Delete/Retire
   button) also falls under the 3:1 boundary minimum. Same fix, a deeper shade
   of the same orange/red so it still reads as "destructive". */
.btn-outline-danger {
    --bs-btn-color: #b3401d;
    --bs-btn-border-color: #b3401d;
    --bs-btn-hover-bg: #b3401d;
    --bs-btn-hover-border-color: #b3401d;
    --bs-btn-active-bg: #b3401d;
    --bs-btn-active-border-color: #b3401d;
    --bs-btn-disabled-color: #b3401d;
    --bs-btn-disabled-border-color: #b3401d;
}

/* .text-bg-* badges (status labels like "Pending", "Retired", "Current")
   force white text regardless of theme. Journal's accent colors are all
   light-to-mid tone, so e.g. white-on-warning-yellow lands around 1.3:1 and
   is nearly unreadable. Swap in dark text for the badge backgrounds this app
   actually uses -- the background colors, and what they mean, don't change. */
.text-bg-warning,
.text-bg-info,
.text-bg-success,
.text-bg-danger,
.text-bg-primary {
    color: #212529 !important;
}

/* .btn-close's stock 50%-opacity "x" icon is faint against a white modal
   header (used in every modal in the app). Same icon, same color, just less
   transparent so it's easier to see. */
.btn-close {
    --bs-btn-close-opacity: 0.65;
}

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

/* ---------------------------------------------------------------------------
   Guided tour (Shepherd.js) on small screens.

   Shepherd sizes its popover at a fixed 400px and right-aligns the footer
   buttons inside it. On a phone -- 375 to 393 CSS pixels -- that is wider than
   the screen, so the popover overflows to the right and takes Next, Back, Done
   and the X close icon off the edge with it. The tour then opens on first visit
   with no reachable way to advance or dismiss it, and its modal overlay blocks
   the page underneath: the app looks locked up.

   Reported from a phone after scanning a session QR code, which is exactly the
   path that lands a first-time visitor on a real page on a small screen.

   These rules live here rather than in a component's scoped CSS because
   Shepherd appends its markup to document.body, outside any component's scope.
   --------------------------------------------------------------------------- */

.shepherd-element {
    /* Never wider than the screen, whatever Shepherd asks for. */
    max-width: calc(100vw - 1.5rem);
}

/* Height, at every screen size. The rules below only ever applied on phones, so on a short
   laptop screen (a small window, or display scaling) a tall step pushed the popover -- and its
   Next/Done buttons -- below the bottom of the screen with no way to scroll to them: the modal
   overlay stops the page scrolling and a popover is not part of the page flow. Capping the
   height and scrolling the text inside keeps the buttons on screen. */
.shepherd-element {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.shepherd-element .shepherd-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

.shepherd-text {
    overflow-y: auto;
    min-height: 0;
}

/* Dialogs built from Bootstrap modal markup (hand-toggled with a "show" class, no Bootstrap JS)
   and the app's own setup-warning / tour-help cards. A dialog taller than the window used to run
   off the bottom -- its Save / Done button unreachable unless the browser was full screen. Now the
   dialog is never taller than the window: the body (or the card) scrolls, and a Bootstrap modal's
   header and footer stay put. */
.modal-dialog {
    max-height: calc(100vh - 1rem);
}

.modal-content {
    max-height: calc(100vh - 2rem);
}

.modal-body {
    overflow-y: auto;
}

.setup-warning-dialog,
.tour-help-dialog {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

@media (max-width: 576px) {
    .shepherd-element {
        width: calc(100vw - 1.5rem);
        max-width: calc(100vw - 1.5rem);
    }

    /* Full-width stacked buttons: reachable, and big enough to hit with a thumb
       rather than the desktop's small right-aligned pair. */
    .shepherd-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .shepherd-footer .shepherd-button {
        flex: 1 1 100%;
        margin: 0;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* The X is the escape hatch when anything else misbehaves -- give it a real
       touch target instead of the desktop's tiny glyph. */
    .shepherd-cancel-icon {
        font-size: 1.75rem;
        padding: 0.25rem 0.5rem;
    }
}