html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* Above the navigation drawer, which is 1100+ in MudBlazor and was covering
   the left third of this -- including the start of the sentence. An error bar
   that is partly hidden reads as a rendering glitch rather than as a message. */
#blazor-error-ui {
    background: #b32121;
    color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -1px 8px rgb(0 0 0 / 30%);
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    z-index: 2000;
}

#blazor-error-ui .reload {
    color: #fff;
}

/* Blockquotes in rendered Markdown (ticket bodies, replies, internal notes, KB). The
   composer's quote button emits "> " lines; Markdig renders them to <blockquote>. */
.markdown-body blockquote {
    margin: .4rem 0;
    padding: .15rem 0 .15rem .9rem;
    border-left: 3px solid var(--mud-palette-lines-default, #d0d0d0);
    color: var(--mud-palette-text-secondary, #666);
}

/* --- Attachment viewer dialog --- */
.attach-viewer-title { overflow-wrap: anywhere; }
.attach-viewer-bar { border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0); }
.attach-viewer-stage {
    min-height: 40vh;
    max-height: 72vh;
    overflow: auto;
    background: var(--mud-palette-background-grey, #f5f5f5);
}
.attach-viewer-stage img { display: block; margin: 0 auto; }
.attach-viewer-center {
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    text-align: center;
}
.attach-viewer-pdf { display: block; width: 100%; height: 72vh; border: 0; }
.attach-viewer-text {
    margin: 0;
    padding: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, Consolas, monospace;
    background: var(--mud-palette-surface, #fff);
}

/* --- Phone layout (≤600px) ---
   MudBlazor's own components are responsive (the drawer collapses to an overlay,
   tables collapse to cards, grids stack), so this is deliberately small: trim the
   things that are merely oversized on a narrow screen. */
@media (max-width: 600px) {
    /* Page titles are Typo.h4/h5; smaller so a long ticket subject and its status
       chip still share the line. */
    .mud-typography-h4 { font-size: 1.5rem !important; }
    .mud-typography-h5 { font-size: 1.2rem !important; }

    /* A wide table or code block scrolls inside itself, never sideways-scrolling the
       whole page. */
    .mud-table-container { overflow-x: auto; }
    .markdown-body pre { overflow-x: auto; }

    /* MudSimpleTable (the read-only "what you submitted" / request-details grids) never
       collapses to cards on its own; stack the label above the value so a 38%-wide label
       column doesn't crush the text on a phone. */
    .stack-on-mobile tr,
    .stack-on-mobile td,
    .stack-on-mobile th {
        display: block !important;
        width: auto !important;
    }

    /* Side-by-side form fields (a MudStack Row of two inputs) are too narrow at 375px;
       opt a row into stacking vertically on a phone. */
    .field-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .field-row > * {
        max-width: 100% !important;
    }
}