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

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

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

/* All MudBlazor chips: rectangular with slightly rounded corners */
.mud-chip {
    border-radius: 6px !important;
}

/* --- Global dense inputs ---------------------------------------------------
   MudBlazor v9 removed MudGlobal.InputDefaults, so the app-wide default input
   Margin can no longer be set in code. These rules replicate Margin="Margin.Dense"
   for all (outlined) inputs so every dropdown/field renders compact by default.
   Values lifted from MudBlazor 9.x's own dense classes:
     - control margin: 4px 0 (8px/4px when the outlined label is present)
     - outlined input height: 18.5px -> 10.5px vertical padding
   Loaded after MudBlazor.min.css and specificity-matched, so it wins for default
   inputs while component-scoped overrides (e.g. CompetitionSelector) still win.
   Fields with an explicit Margin="Margin.Dense" get the same values (harmless). */
.mud-input-control {
    margin: 4px 0;
}

.mud-input-control.mud-input-outlined-with-label {
    margin-top: 8px;
    margin-bottom: 4px;
}

div.mud-input-slot.mud-input-root-outlined {
    padding-top: 10.5px;
    padding-bottom: 10.5px;
}
/* ===== Phone / small-tablet layout ==========================================================
   MudBlazor breakpoints: Xs < 600px, Sm < 960px (Md and up is "desktop").
   app.css is linked BEFORE MudBlazor.min.css, so every rule here either carries !important or
   has higher specificity than MudBlazor's own rule for the same property.
   Column hiding inside MudTable uses MudBlazor's built-in `MudTd HideSmall="true"`; `.hide-xs`
   below is only for non-table blocks (export/print bars, chip boxes) that make no sense on a phone. */
/* Signed-in user + logout icon in the app bar (MainLayout and PortalLayout). */
.mud-appbar .appbar-user { display: flex; align-items: center; gap: 4px; margin-left: 16px; white-space: nowrap; }
.mud-appbar .appbar-user-icon { opacity: 0.85; }
.mud-appbar .appbar-user-name { font-size: 0.875rem; margin-right: 4px; }

@media (max-width: 959.98px) {
    /* Prerender guard: MainLayout switches the drawer to a Temporary overlay once the viewport
       service reports a small screen. Until then, hide the docked Mini rail and drop the margins
       MudLayout reserves for it, so the first paint on a phone is not 240px narrower. */
    .mud-layout .mud-drawer.mud-drawer-mini { display: none; }
    .mud-layout .mud-main-content { margin-left: 0 !important; margin-right: 0 !important; }
    .mud-layout .mud-appbar { margin-left: 0 !important; width: 100% !important; }

    /* MudTd HideSmall="true" cells in a Breakpoint.Sm table (stacked below 960px): MudBlazor only
       collapses them (visibility:collapse leaves a ~12px ghost row); remove them from the flow.
       Must stay scoped to the table's own stacking width, or grid-mode rows lose cells under
       a header that still shows every column. */
    .mud-sm-table .mud-table-cell-hide { display: none !important; }

    /* Tables: neutralize inline Height="calc(100vh - 480px)" / "48vh" / "600px" so the rows grow
       with the page instead of being clipped into a ~180px scroll box. */
    .mud-table .mud-table-container { height: auto !important; max-height: none !important; }

    /* Toolbars: MudStack Row="true" (d-flex flex-row) and MudItem Class="d-flex ..." wrap instead
       of overflowing horizontally. Add Wrap="Wrap.NoWrap" to a stack that must stay on one line. */
    .mud-main-content .d-flex.flex-row:not(.flex-nowrap),
    .mud-main-content .mud-grid-item.d-flex { flex-wrap: wrap; }

    /* App bar: hide decoration, keep hamburger + page title + competition selector. */
    .mud-appbar .logo-container,
    .mud-appbar .appbar-spacer { display: none !important; }
    .mud-appbar .mud-typography-h6 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
}

@media (max-width: 599.98px) {
    .mud-appbar .appbar-basetext,
    .mud-appbar .appbar-right-text,
    .mud-appbar .appbar-user-icon,
    .mud-appbar .appbar-user-name { display: none !important; }
    .mud-appbar .appbar-user { margin-left: 4px; }

    /* Dialogs: near-full width, tighter padding, wrapping action row with full-width buttons. */
    .mud-dialog:not(.mud-dialog-fullscreen) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px;
    }
    .mud-dialog-title { padding: 12px 16px; }
    .mud-dialog-content { padding: 8px 12px; }
    .mud-dialog-actions { flex-wrap: wrap; row-gap: 8px; }
    .mud-dialog-actions .mud-button-root { flex: 1 1 auto; }

    /* Same for the default Breakpoint.Xs tables, which stack below 600px. */
    .mud-xs-table .mud-table-cell-hide { display: none !important; }

    /* Long unbreakable text (published URLs) inside alerts must wrap, not widen the page. */
    .mud-main-content .mud-alert-message { min-width: 0; overflow-wrap: anywhere; }

    /* Desktop-only blocks. */
    .hide-xs { display: none !important; }

    /* Tighter gutters. */
    .mud-container--gutters { padding-left: 8px; padding-right: 8px; }
    .mud-main-content.px-2 { padding-left: 4px !important; padding-right: 4px !important; }

    /* Pager: drop the "1-10 of 250" text so the controls fit 375px; larger tap targets in
       stacked (card-mode) tables. */
    .mud-table-pagination .mud-table-page-number-information { display: none; }
    .mud-xs-table .mud-table-cell .mud-icon-button { padding: 8px; }
}

/* One height (~34px) for every single-line field in the app: text, numeric, date and time fields,
   dropdowns (MudSelect) and autocompletes. All of them are Variant.Outlined + Margin.Dense; this
   trims the vertical padding and uses body2 text so a field lines up with the small buttons beside
   it. Multi-line text areas (textarea) and MudField containers keep their own height.
   Specificity must beat MudBlazor.min.css, which loads after this file:
   .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense sets 10.5px. */
.mud-input.mud-input-outlined > input.mud-input-slot.mud-input-root-outlined,
.mud-select .mud-input.mud-input-outlined .mud-input-slot {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.875rem;
}

.mud-input.mud-input-outlined .mud-input-adornment .mud-icon-root {
    font-size: 1.25rem;
}

/* The label resting inside an empty field, centred in the 34px box (MudBlazor's 12px is for its
   taller dense box). One class more than MudBlazor's resting rule, and still far less specific
   than its ".mud-shrink ~ label..." rule, so the floating label is untouched. */
.mud-input-label.mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, 8px) scale(1);
}

/* Every text button (MudButton, whatever its Size) is as tall as the fields above: 34px. The
   vertical padding goes and min-height takes over, so a button of any size lands on 34px. Labels
   stay on one line - a wrapped label is what made a button taller - so give a button a column
   wide enough for its label. Round icon-only buttons (MudIconButton) keep their own size. */
.mud-button-root.mud-button {
    min-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
}