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

/* Pinned (sticky) Player column on the roster grid, so the name stays visible
   when scrolling sideways (e.g. on mobile). Opaque background (overriding the
   striped rows) so scrolling content doesn't show through; theme-aware via MudBlazor vars. */
.sticky-col {
    position: sticky !important;
    left: 0 !important;
    background-color: var(--mud-palette-surface) !important;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.25);
}

th.sticky-col {
    z-index: 3;
}

td.sticky-col {
    z-index: 2;
}

/* Make the wrapper the single horizontal scroll container, so the sticky columns and the
   scroll-position watcher (roster-sticky.js) all anchor to the same element. */
.roster-scroll {
    overflow-x: auto;
}

    .roster-scroll .mud-table-container {
        overflow: visible !important;
    }

/* Pinned War pref column. Sits left of the Days column (offset by its 3rem width).
   Shows a 1-letter abbreviation when collapsed, full text when scrolled fully right. */
.sticky-col-right {
    position: sticky !important;
    right: 2rem !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    white-space: nowrap;
    text-align: center;
    background-color: var(--mud-palette-surface) !important;
    box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.25);
}

th.sticky-col-right {
    z-index: 3;
}

td.sticky-col-right {
    z-index: 2;
}

.sticky-col-right .wp-full {
    display: none;
}

.roster-scroll.at-right .sticky-col-right {
    box-shadow: none;
}

    .roster-scroll.at-right .sticky-col-right .wp-abbr {
        display: none;
    }

    .roster-scroll.at-right .sticky-col-right .wp-full {
        display: inline;
    }

/* Pinned right-most column: per-player count of rostered days. Always narrow. */
.sticky-col-days {
    position: sticky !important;
    right: 0 !important;
    box-sizing: border-box;
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    padding-left: 4px !important;
    padding-right: 4px !important;
    background-color: var(--mud-palette-surface) !important;
}

th.sticky-col-days {
    z-index: 3;
}

td.sticky-col-days {
    z-index: 2;
}