.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-break { overflow-wrap: anywhere; }
.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);
}

/* ---------------------------------------------------------------------------
   Phones (below MudBlazor's sm breakpoint, 600px).
   --------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
    /* MudBlazor keeps 32px around FullWidth dialogs, leaving under 250px of content at 360px. */
    .mud-dialog-width-full {
        width: calc(100% - 16px);
    }

    .mud-dialog-width-false {
        max-width: calc(100% - 16px);
    }

    .mud-dialog .mud-dialog-content {
        padding: 8px 12px;
    }

    .mud-dialog .mud-dialog-title {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Cards and expansion panels are often nested (page card > panel), and their default 16-24px
       side padding adds up to a third of the screen width. */
    .mud-card-content {
        padding: 12px;
    }

    .mud-expand-panel .mud-expand-panel-header {
        padding: 12px;
    }

    .mud-expand-panel .mud-expand-panel-content {
        padding: 0 12px 12px;
    }

    /* MudSimpleTable that should keep readable columns and scroll sideways inside its container
       instead of squeezing every column into the screen width. */
    .scroll-on-phone table {
        min-width: 600px;
    }

    /* MudSimpleTable with many columns: show each row as a block of "label: value" lines, like
       MudTable's Breakpoint does. Put the column name in data-label on every td. */
    .stack-on-phone table thead {
        display: none;
    }

    .stack-on-phone table,
    .stack-on-phone table tbody {
        display: block;
    }

    .stack-on-phone table tbody > tr {
        display: block;
        padding: 4px 0;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .stack-on-phone table tbody > tr > td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border-bottom: none;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .stack-on-phone table tbody > tr > td:not([data-label]) {
        justify-content: center;
        text-align: center;
    }

    .stack-on-phone table tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 600;
        text-align: left;
    }
}

/* Tables with a label column followed by long unspaced values (URLs, GUIDs, emails, JSON): let the
   value cells wrap anywhere instead of widening the table past the page or dialog. The label
   column keeps whole words. */
.wrap-cells td:not(:first-child) {
    overflow-wrap: anywhere;
}