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

/* MudBlazor label fix - stops label overlapping typed text */
.mud-input-label-outlined {
    background-color: white;
    padding: 0 4px;
}

.mud-input.mud-input-outlined .mud-input-slot {
    padding-top: 20px !important;
    padding-bottom: 8px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   MOBILE
   One shared layer so every page shrinks the same way, rather than each page
   inventing its own phone treatment. Page-specific tweaks still live in that
   page, but anything here is deliberately site-wide.

   599.98px is MudBlazor's own xs/sm boundary — matching it keeps CSS and
   MudHidden Breakpoint="Breakpoint.SmAndDown" in agreement.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {

    /* Type scale. MudBlazor's defaults are desktop sizes — h4 lands at 34px on
       a 375px screen, which eats two lines for most page titles. */
    .mud-typography-h1 { font-size: 2.1rem !important; line-height: 1.15 !important; }
    .mud-typography-h2 { font-size: 1.8rem !important; line-height: 1.18 !important; }
    .mud-typography-h3 { font-size: 1.6rem !important; line-height: 1.2 !important; }
    .mud-typography-h4 { font-size: 1.4rem !important; line-height: 1.25 !important; }
    .mud-typography-h5 { font-size: 1.2rem !important; line-height: 1.3 !important; }
    .mud-typography-h6 { font-size: 1.05rem !important; line-height: 1.35 !important; }

    /* Layout chrome was taking 64px of a 375px screen (16px main + 16px
       container, each side), leaving 311px for content. */
    .mud-main-content { padding-left: 8px !important; padding-right: 8px !important; }
    .mud-container    { padding-left: 8px !important; padding-right: 8px !important; }

    /* Cards and panels: pa-4/pa-5/pa-6 are generous at desktop widths and
       wasteful at phone widths. */
    .mud-paper.pa-6 { padding: 20px !important; }
    .mud-paper.pa-5 { padding: 16px !important; }
    .mud-paper.pa-4 { padding: 14px !important; }

    /* Dialogs: a centred box with margins on a phone wastes the screen and
       pushes forms below the fold. Go near-fullscreen. */
    .mud-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .mud-dialog-content { padding: 14px !important; max-height: calc(100vh - 132px); }
    .mud-dialog-title   { padding: 12px 14px !important; }
    .mud-dialog-actions { padding: 8px 12px !important; }

    /* Tables stack themselves via Breakpoint.Md + DataLabel; this just stops
       each stacked cell being needlessly tall. */
    .mud-table-cell {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Tabs: MudBlazor supplies its own scroll buttons when the strip overflows,
       so this only needs to stop each tab hogging width. */
    .mud-tab { min-width: 0 !important; padding: 0 12px !important; font-size: 0.82rem !important; }

    /* Toolbars and filter rows wrap instead of overflowing. */
    .mud-toolbar { flex-wrap: wrap; height: auto !important; min-height: 0 !important; padding: 6px 8px !important; }
}

/* Blazor error boundary */
.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."
    }

/* ───────────────────────────────────────────────────────────────────────────
   ACCOUNT TYPE on the sign-up page. The whole row is the radio's label.
   ─────────────────────────────────────────────────────────────────────────── */
.role-options { display: flex; flex-direction: column; gap: 8px; }
.role-option {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid #D8D3E4; border-radius: 10px;
    background: #fff; cursor: pointer;
}
.role-option:hover { border-color: #7C4DFF; background: #FAF8FF; }
.role-option:has(input:checked) { border: 2px solid #7C4DFF; padding: 11px 13px; background: #F4F1FA; }
.role-option input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #7C4DFF; }
.role-option-emoji { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; }
.role-option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.role-option-text span { font-size: 0.85rem; color: #615C70; }

/* ───────────────────────────────────────────────────────────────────────────
   ACCOUNT MENU, top right of the app bar
   CSS only, so it works on the static account pages too. The panel's top
   padding bridges the gap to the trigger, so moving the mouse down doesn't
   close it.
   ─────────────────────────────────────────────────────────────────────────── */
.account-menu { position: relative; display: flex; align-items: center; min-width: 0; flex-shrink: 1; }
.account-menu-trigger {
    display: flex; align-items: center; gap: 4px; min-width: 0;
    padding: 6px 8px; border: 0; border-radius: 6px;
    background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.account-menu-trigger:hover, .account-menu:focus-within .account-menu-trigger { background: rgba(255, 255, 255, 0.16); }
.account-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; max-width: 220px; }
.account-menu-panel { display: none; position: absolute; top: 100%; right: 0; padding-top: 6px; z-index: 1500; }
.account-menu:hover .account-menu-panel, .account-menu:focus-within .account-menu-panel { display: block; }
.account-menu-list {
    min-width: 180px; padding: 6px 0; border-radius: 8px;
    background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.account-menu-list a { display: block; padding: 10px 16px; color: #3D3850; text-decoration: none; font-size: 0.9rem; white-space: nowrap; }
.account-menu-list a:hover, .account-menu-list a:focus { background: #F4F1FA; }

/* ───────────────────────────────────────────────────────────────────────────
   ACCOUNT SETTINGS
   These pages come from the ASP.NET Identity template and expect Bootstrap,
   which the site doesn't ship. Just enough of it, in the site's own colours,
   scoped to the settings area so nothing else is touched.
   ─────────────────────────────────────────────────────────────────────────── */
.account-manage { max-width: 900px; margin: 0 auto; }
.account-manage .account-back { display: inline-block; margin-bottom: 12px; text-decoration: none; font-weight: 500; }
.account-manage h1 { font-size: 1.6rem; font-weight: 500; margin: 0 0 8px; }
.account-manage h2 { font-size: 1.25rem; font-weight: 500; margin: 0 0 12px; }
.account-manage h3 { font-size: 1.1rem; font-weight: 500; margin: 16px 0 8px; }
.account-manage h4 { font-size: 1rem; font-weight: 500; margin: 16px 0 8px; }
.account-manage hr { border: 0; border-top: 1px solid #E8E2F5; margin: 12px 0 16px; }
.account-manage a { color: #5E35B1; }
.account-manage .row { display: flex; flex-wrap: wrap; gap: 24px; }
.account-manage .row > * { flex: 1 1 280px; min-width: 0; }
.account-manage .col-lg-3 { flex: 0 1 230px; }
.account-manage .nav { list-style: none; margin: 0; padding: 0; }
.account-manage .nav-link { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: #3D3850; }
.account-manage .nav-link:hover { background: #F4F1FA; }
.account-manage .nav-link.active { background: #7C4DFF; color: #fff; }
.account-manage .form-floating { position: relative; display: flex; flex-direction: column-reverse; gap: 4px; }
.account-manage .form-label { font-size: 0.85rem; color: #615C70; }
.account-manage .form-control { width: 100%; box-sizing: border-box; padding: 10px; font: inherit; font-size: 16px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.account-manage .form-control:disabled { background: #F4F1FA; color: #615C70; }
.account-manage .mb-3 { margin-bottom: 14px; }
.account-manage .w-100 { width: 100%; }
.account-manage .btn { display: inline-block; box-sizing: border-box; padding: 9px 16px; border: 1px solid #7C4DFF; border-radius: 6px; background: #fff; color: #5E35B1; font: inherit; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; }
.account-manage .btn-primary { background: #7C4DFF; color: #fff; }
.account-manage .btn-danger { background: #E53935; border-color: #E53935; color: #fff; }
.account-manage .btn-link { border-color: transparent; }
.account-manage .text-danger { color: #C62828; }
.account-manage .alert { padding: 10px 14px; border-radius: 6px; background: #FFF8E1; margin-bottom: 14px; }
.account-manage .alert-success { background: #E8F5E9; }
.account-manage .alert-danger { background: #FFEBEE; }
.account-manage .table { width: 100%; border-collapse: collapse; }
.account-manage .table td, .account-manage .table th { padding: 8px; border-bottom: 1px solid #E8E2F5; text-align: left; }