/* The Radzen theme only applies these base rules when a RadzenLayout (.rz-layout) is present, which our
   custom layout no longer renders. Without them the page lost border-box sizing (so width:100% elements
   with padding overflowed and were clipped on the right), the sans-serif body font, and the body margin
   reset. Apply them unconditionally; the theme variables still resolve, with fallbacks just in case. */
html {
    box-sizing: border-box;
    font-size: var(--rz-root-font-size, 16px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--rz-text-color);
    background-color: var(--rz-body-background-color);
    font-family: var(--rz-text-font-family, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: var(--rz-body-font-size, 1rem);
    line-height: var(--rz-body-line-height, 1.5);
}

h1:focus {
    outline: none;
}

/* Links use one clear blue in every state, including visited, instead of the theme's reddish link colour,
   which is hard to make out on screen (and with red/green colour blindness). The blue keeps a solid
   contrast on the light background. Component links that set their own colour (calendar cells, header
   icons, Radzen buttons) keep it through higher-specificity rules. */
/* Links are one clear blue in every state, including visited and on hover, instead of the theme's reddish
   link colours. No !important, so component links with their own colour — the calendar day cells (color:
   inherit) and the header icons — keep theirs through higher-specificity rules. The theme already shows
   an underline on hover only, which is the affordance we want. */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    color: #0a58ca;
}

a, a:link, a:visited {
  text-decoration: none;
}

a:hover, a:focus, a:active {
  text-decoration: underline;
}

/* The Material theme singles out Markdown links: it underlines them permanently and reddens them on
   hover. Bring them in line with every other link — blue, underlined only on hover. These selectors
   outrank the theme's .rz-markdown rules, so no !important is needed. */
body .rz-markdown a,
body .rz-markdown a:link,
body .rz-markdown a:visited,
body .rz-markdown a:hover,
body .rz-markdown a:focus,
body .rz-markdown a:active {
    color: #0a58ca;
    text-decoration: none;
}

body .rz-markdown a:hover,
body .rz-markdown a:focus {
    text-decoration: underline;
}

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

.rz-text-h1 {
  font-size: 2rem !important;
  font-weight: bold;
}

.rz-text-h2 {
  font-size: 1.5rem !important;
  font-weight: bold;
}

.rz-text-h3 {
  font-size: 1.25rem !important;
  font-weight: bold;
}
/* macOS (and iPadOS) draws overlay scrollbars that only appear while you are actually scrolling, so a
   scrollable area looks exactly like one that is not — you cannot tell there is more content below until
   you happen to try. Opt out of that: -webkit-appearance: none is what turns the overlay scrollbar into a
   permanently visible one in WebKit and Chrome, and scrollbar-width/-color does the same in Firefox.
   Deliberately applied everywhere rather than to particular lists, since the ambiguity is the same in the
   dialogs, the grids, the import preview and the page itself. */
/* Only for engines without ::-webkit-scrollbar, which in practice means Firefox. In Chromium, setting
   scrollbar-width or scrollbar-color on an element makes it ignore the ::-webkit-scrollbar rules below
   entirely — and the standard properties on their own still give a fading overlay scrollbar on macOS. So
   applying both would silently undo the fix. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--rz-base-400, #b0b0b0) transparent;
    }
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--rz-base-400, #b0b0b0);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rz-base-500, #909090);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* Radzen's dialog content box is what scrolls when a dialog is taller than the window, which takes the
   button row down with it — the user has to scroll to reach the action they opened the dialog for. Making
   it a flex column lets DialogLayout fill it and scroll its own body instead, leaving the buttons in
   place. Global because the element is Radzen's, outside any component's scoped styles. Dialogs that do
   not use DialogLayout (Radzen's own Confirm, for one) are unaffected: a single child in a flex column
   lays out exactly as it did in a block. */
.rz-dialog-content {
    display: flex;
    flex-direction: column;
}

/* Radzen's tab panel is a plain block, so a grid inside a RadzenTabsItem cannot flex-fill it however it is
   styled: the grid grows to the height of every row, the tab wrapper ends up being what scrolls, and the
   column headers scroll away with it. AllowVirtualization then has no height-limited box to measure
   against either, and Blazor's Virtualize leaves a spacer for rows it believes are off-screen — a second
   scrollbar inside the grid that snaps back to the top when dragged. It shows up only when that
   arithmetic happens to land wrong, so the same page can look fine on one deployment and not the other.

   Making the panel a flex column that fills its wrapper gives the grid a real height, so the grid's own
   .rz-data-grid-data scrolls, the sticky header stays put, and virtualization measures what it should.
   Global because the elements are Radzen's, outside any component's scoped styles; both pages that use
   RadzenTabs (the event's participants and the membership-fee register) are built to fill the page this
   way. Two classes deep because RadzenTheme is loaded after this file, so an equally specific rule of
   ours would lose. Only the selected panel is rendered, so nothing hidden is being forced into view.

   Radzen's own overflow on the wrapper is deliberately left alone: a tab whose content is ordinary markup
   rather than a self-scrolling grid — the event's squad overview — still needs the wrapper to scroll it.
   Taking that away clips it with no scrollbar at all. */
.rz-tabview > .rz-tabview-panels {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rz-tabview-panels > .rz-tabview-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The participant list is wide, and the "..." action column pushed it into a horizontal scrollbar. Let
   this page's content reach the window's right edge — cancelling the page's right padding and the tab
   panel's — so the grid has that much more room. Only this page, so other pages keep their margins. */
.participants-page {
    margin-right: calc(-1 * var(--rz-layout-body-padding, 1rem));
}

.participants-page .rz-tabview-panel {
    padding-right: 0;
}

/* The "Pre"/"Hoved" match-phase badge. Global rather than component-scoped because both the participant
   list and the squad overview show it, and Blazor's scoped CSS would otherwise force a copy per
   component. */
.match-badge {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    margin-right: 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    background: var(--rz-base-200, #eceff1);
}

/* Marks a range-officer register row that is one of our own members, as opposed to an external person. */
.ro-member-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-200, #eceff1);
}

/* The small green "RO" tag shown next to a participant who is a registered range officer for the event. */
.ro-badge {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: var(--rz-success, #4caf50);
}

/* The red "RM" tag for the single range master of an event. Same shape as the RO tag; a range master is
   also a range officer, so the red tag stands in for the green one. */
.rm-badge {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: var(--rz-danger, #f44336);
}