html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    touch-action: manipulation;
    background-color: #121212;
    background-image:
        linear-gradient(rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.85)),
        url('_content/DropShot.UI/images/background.png');
    background-repeat: repeat;
    color: #e0e0e0;
}

/* MudBlazor's .mud-swipearea sets touch-action:none which blocks page scrolling on mobile */
.mud-carousel .mud-swipearea {
    touch-action: pan-y;
}

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

.btn-primary {
    color: #fff;
    background-color: #2a2a2a;
    border-color: #1a1a1a;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #1a1a1a, 0 0 0 0.25rem #555;
}

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

.scoreboard-player-name {
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
    margin-bottom: 4px;
}

.scoreboard-serve-indicator {
    display: inline-block;
    width: 50px;
    font-size: 1.5rem;
}

.scoreboard-tiebreak {
    margin-top: clamp(8px, 1.5vh, 16px);
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: bold;
    color: gold;
    letter-spacing: 0.1em;
    text-align: center;
}

/* Scoring-active mode — fills remaining viewport below banner, no scroll */
body.scoring-active {
    overflow: hidden !important;
    height: 100svh !important;
}

body.scoring-active .page {
    height: 100% !important;
    overflow: hidden !important;
}

body.scoring-active main {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
}

body.scoring-active .content {
    padding: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* ── Role banner (sticky below the top navbar) ─────────────────────────── */
/* The .top-navbar is sticky (desktop) or fixed (mobile) at top:0 with
   height 3.5rem, so park the sticky role banner just below it on both. */
.role-banner {
    background: var(--mud-palette-info);
    color: white;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    position: sticky;
    top: 3.5rem;
    z-index: 10;
}

.role-banner-select {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.role-banner-select:hover {
    background: rgba(255, 255, 255, 0.25);
}

.role-banner-select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
}

.role-banner-select option {
    background: #1e1e2e;
    color: #d7d7d7;
}

/* Hide the role banner when scoring takes over. */
body.scoring-active .role-banner {
    display: none !important;
}

/* Hide the site footer while a match is being scored — otherwise on
   mobile it sits on top of the scoring controls and makes the screen
   unusable. */
body.scoring-active footer.site-footer {
    display: none !important;
}

/* Scoring-immersive mode — additionally hides the top navbar so the
   scoring view fills the entire viewport. User-toggleable via the
   fullscreen button on the scoring screen. */
body.scoring-immersive .top-navbar {
    display: none !important;
}

/* Scoreboard page opts out of the global 1280px content cap so the
   grid and individual tiles can fill the full viewport width. */
body.scoreboard-active .content {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Legacy — keep for external scoreboard page if still used */
body.scoreboard-fullscreen .sidebar,
body.scoreboard-fullscreen .role-banner,
body.scoreboard-fullscreen .top-row,
body.scoreboard-fullscreen .navbar-toggler,
body.scoreboard-fullscreen footer.site-footer {
    display: none !important;
}

body.scoreboard-fullscreen .content {
    padding: 0 !important;
    max-width: none !important;
}

body.scoreboard-fullscreen main {
    padding-top: 0 !important;
}

/* ── QR Login Panel ──────────────────────────────────────────────────────── */
.qr-login-panel {
    text-align: center;
    padding: 1rem;
}

.qr-loading,
.qr-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
}

.qr-code-wrapper {
    display: inline-block;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 2px solid var(--mud-palette-lines-default, #e0e0e0);
}

.qr-code-login svg {
    display: block;
}

/* ── Mobile Auth Page ────────────────────────────────────────────────────── */
.mobile-auth-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile table polish
   Two things go wrong on phones by default:
     1. Tables that don't use MudBlazor's responsive breakpoint can overflow
        the viewport, which scrolls the whole page sideways.
     2. When tables *do* stack into single-cell-per-row cards (MudBlazor's
        built-in mobile mode) every row blurs into the next because there's
        no separator between them.
   The rules below keep any table contained to its parent (scrolls locally
   instead of the page) and add a strong border between stacked rows.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640.98px) {
    /* Tables shouldn't force the page wider than the viewport. */
    .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Opt-in class (`mobile-stack-table`) for grids that use Breakpoint="Sm"
       and have DataLabel set on every cell: render each row as a labelled
       card with a clear gap between entries. */
    .mobile-stack-table .mud-table-root .mud-table-body .mud-table-row {
        display: block;
        padding: 0.75rem 0.25rem;
        border-bottom: 2px solid rgba(255, 255, 255, 0.18);
    }

    .mobile-stack-table .mud-table-root .mud-table-body .mud-table-row:last-child {
        border-bottom: none;
    }

    /* MudBlazor emits `:before` text from DataLabel when stacked – nudge the
       value so the label and value read as a pair instead of a wall of text. */
    .mobile-stack-table .mud-table-root .mud-table-body .mud-table-cell {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-bottom: none;
    }

    .mobile-stack-table .mud-table-root .mud-table-body .mud-table-cell:before {
        font-weight: 600;
        opacity: 0.75;
        flex-shrink: 0;
    }
}