.mud-code-block {
    white-space: pre-wrap;
    max-height: 50vh;
    overflow: auto;
    font-family: var(--mud-typography-monospace-family, monospace);
    background-color: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 0.5rem;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Generic utility helpers.
   MudBlazor ships many layout utilities (d-flex, flex-column, align-center,
   justify-space-between, gap-*, pa-*, ma-*, mr-*, ml-*, mud-width-full ...),
   but a handful of generic helpers used across the app are not in MudBlazor
   (they came from Bootstrap, which was removed in the MudBlazor migration).
   These are plain CSS helpers, not Bootstrap's design system.
   --------------------------------------------------------------------------- */

/* Font weight / style */
.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.fst-italic { font-style: italic; }
.small { font-size: 0.875em; }

/* Text alignment / wrapping */
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }
.text-nowrap { white-space: nowrap; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Muted text (matches MudBlazor's secondary text color) */
.mud-text-primary {
    color: var(--mud-palette-text-primary);
}
.mud-text-secondary { color: var(--mud-palette-text-secondary); }
.mud-text-tertiary {
    color: var(--mud-palette-text-tertiary);
}

/* Sizing */
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* End-aware margins (Bootstrap me-/ms- logical-property names) */
.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }
.me-3 { margin-right: 1rem; }
.ms-2 { margin-left: 0.5rem; }

/* Border */
.border { border: 1px solid var(--mud-palette-lines-default); }

/* NOTE: align-items-*\/justify-content-* (Bootstrap naming) used to be shimmed here.
   MudBlazor ships its own equivalents natively with !important (align-center/align-start/
   align-end, justify-center/justify-space-between, and responsive align-md-center/
   align-lg-start/align-lg-end/align-self-lg-end/flex-lg-row) - those are used directly in
   markup now instead of duplicating them here. */

/* Responsive helpers used in a few cards that MudBlazor doesn't ship */
@media (min-width: 768px) {
    .mt-md-0 { margin-top: 0; }
    .text-md-start { text-align: left; }
    .text-md-end { text-align: right; }
}

@media (min-width: 992px) {
    .ms-lg-auto { margin-left: auto; }
}

/* MudDialog reserves 64px of right padding on its title bar for the close button but only
   24px on the left (see .mud-dialog-title:has(.mud-button-close) in MudBlazor's own CSS), so a
   naively centered title (ModalHeaderImage + text) sits ~20px left of the dialog's true center.
   Adding matching left padding here re-balances it. Use on the title wrapper of any dialog that
   both centers its TitleContent and shows the default close button. */
.modal-title-content {
    padding-left: 40px;
}

/* Snackbar toasts default to 24px from the viewport top, which sits underneath/behind the
   fixed MudAppBar. Push top-anchored toasts below the app bar instead. */
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-right {
    top: calc(var(--mud-appbar-height, 64px) + 16px);
}