@import '_content/ArkPadel.UI.Shared/ArkPadel.UI.Shared.x5tdresid4.bundle.scp.css';

/* /Components/DayNavigator.razor.rz.scp.css */
.ark-day-nav[b-0w2ml3txan] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ark-day-nav[b-0w2ml3txan]  .ark-day-nav-picker {
    inline-size: 12.5rem;
    flex: 0 0 auto;
}

/* Visually hidden, still announced: the field shows the date in words. */
.ark-day-nav[b-0w2ml3txan]  .ark-day-nav-picker .mud-input-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ark-day-nav[b-0w2ml3txan]  .ark-day-nav-picker .mud-input-control-input-container,
.ark-day-nav[b-0w2ml3txan]  .ark-day-nav-picker .mud-input {
    margin-block-start: 0;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Themed to match the phone's own error bar (ArkPadel.Mobile/wwwroot/css/app.css): replaces the
   template's `lightyellow`/`color-scheme: light only` strip with the card tier and a destructive
   top edge, which still reads as an alarm without leaving the palette. */
#blazor-error-ui[b-nnrx9qtyov] {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    box-sizing: border-box;
    padding: 0.75rem 3rem 0.75rem 1.25rem;
    border-top: 2px solid var(--destructive);
    background: var(--card);
    color: var(--foreground);
    font-size: var(--text-sm);
    line-height: 1.5;
    box-shadow: var(--shadow-md);
}

    #blazor-error-ui a[b-nnrx9qtyov],
    #blazor-error-ui .dismiss[b-nnrx9qtyov] {
        color: var(--primary);
        cursor: pointer;
    }

    #blazor-error-ui .dismiss[b-nnrx9qtyov] {
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        color: var(--muted-foreground);
    }

/* The app bar's trailing control: anchored over the bar rather than passed into AppShell's
   RenderFragment, since that position never gets an interactive island (see MainLayout.razor).
   Matches --mud-appbar-height for vertical centering and ark-mud.css's toolbar padding (0.75rem, 1.25rem from 960px up) for the inset. */
.ark-bar-actions[b-nnrx9qtyov] {
    position: fixed;
    inset-block-start: 0;
    /* Stepped in by the bell's own reserved width: NotificationBell is fixed at the trailing edge
       and rendered from PageContainer, so the two can't share a flex row. --ark-bell-reserve is
       defined in ark-components.css, next to the note on which of the two widths is safe to assume. */
    inset-inline-end: calc(0.75rem + var(--ark-bell-reserve, 2.75rem));
    /* One above the app bar, read from MudBlazor's own variable rather than guessed: hard-coding
       1101 put this under the bar (the real value is 1300), so the bar's glass painted over the
       control and swallowed every click. */
    z-index: calc(var(--mud-zindex-appbar, 1300) + 1);
    display: flex;
    align-items: center;
    block-size: var(--mud-appbar-height, 3.5rem);
}

@media (min-width: 960px) {
    .ark-bar-actions[b-nnrx9qtyov] {
        inset-inline-end: calc(1.25rem + var(--ark-bell-reserve, 2.75rem));
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Blazor's stock reconnect dialog, restyled with the Ark tokens: structure, ids and class names
   stay exactly the template's, since ReconnectModal.razor.js toggles these classes by name and
   Blazor's own handler looks for #components-reconnect-modal — only colours, radii and type are ours. */

.components-reconnect-first-attempt-visible[b-aesft5h1vo],
.components-reconnect-repeated-attempt-visible[b-aesft5h1vo],
.components-reconnect-failed-visible[b-aesft5h1vo],
.components-pause-visible[b-aesft5h1vo],
.components-resume-failed-visible[b-aesft5h1vo],
.components-rejoining-animation[b-aesft5h1vo] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-aesft5h1vo],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-aesft5h1vo],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-aesft5h1vo],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-aesft5h1vo],
#components-reconnect-modal.components-reconnect-retrying[b-aesft5h1vo],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-aesft5h1vo],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-aesft5h1vo],
#components-reconnect-modal.components-reconnect-failed[b-aesft5h1vo],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-aesft5h1vo] {
    display: block;
}

/* Blazor keeps the show class on while it retries, so without this both lines read at once. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-aesft5h1vo] {
    display: none;
}

#components-reconnect-modal[b-aesft5h1vo] {
    width: 20rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--card);
    color: var(--card-foreground);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.5;
    box-shadow: var(--shadow-lift);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-aesft5h1vo 0.5s both;
}

#components-reconnect-modal[open][b-aesft5h1vo] {
    animation:
        components-reconnect-modal-slideUp-b-aesft5h1vo 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s,
        components-reconnect-modal-fadeInOpacity-b-aesft5h1vo 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

/* Deeper than the template's 0.4: the app's canvas is nearly black, so a light scrim wouldn't read as one. --overlay is the token for this. */
#components-reconnect-modal[b-aesft5h1vo]::backdrop {
    background-color: var(--overlay);
    animation: components-reconnect-modal-fadeInOpacity-b-aesft5h1vo 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-aesft5h1vo {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-aesft5h1vo {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-aesft5h1vo {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-aesft5h1vo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-aesft5h1vo] {
    margin: 0;
    text-align: center;
    color: var(--foreground);
}

/* Tabular nums so the countdown box doesn't twitch as the digits change. */
#components-seconds-to-next-attempt[b-aesft5h1vo] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Same geometry as .mud-button in ark-mud.css, so Retry and Resume match every other button in the portal. */
#components-reconnect-modal button[b-aesft5h1vo] {
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: filter var(--duration-fast) var(--ease-out-cubic);
}

#components-reconnect-modal button:hover[b-aesft5h1vo] {
    filter: brightness(1.05);
}

#components-reconnect-modal button:active[b-aesft5h1vo] {
    filter: brightness(0.9);
}

#components-reconnect-modal button:focus-visible[b-aesft5h1vo] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.components-rejoining-animation[b-aesft5h1vo] {
    position: relative;
    width: 80px;
    height: 80px;
}

/* The expanding rings, in the brand colour rather than the template's #0087ff. */
.components-rejoining-animation div[b-aesft5h1vo] {
    position: absolute;
    border: 3px solid var(--primary);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-aesft5h1vo 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-aesft5h1vo] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-aesft5h1vo {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* A pulsing ring is decoration; the sentence beside it carries the message. */
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-aesft5h1vo],
    #components-reconnect-modal[open][b-aesft5h1vo],
    .components-rejoining-animation div[b-aesft5h1vo] {
        animation: none;
    }

    #components-reconnect-modal[open][b-aesft5h1vo] {
        opacity: 1;
    }
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* A ticket body inside a grid cell: wraps and stays narrow so one long message doesn't stretch the table past the viewport. */

.ark-ticket-detail[b-dyrn6h0zoj] {
    max-inline-size: 32rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ark-ticket-answer[b-dyrn6h0zoj] {
    max-inline-size: 32rem;
    margin-block-start: 0.375rem;
    padding-inline-start: 0.625rem;
    border-inline-start: 2px solid var(--saffron-ink);
    color: var(--text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Pages/TournamentDetail.razor.rz.scp.css */
/* The entrants tab's "Add player" row: a searchable player picker and a button, side by side on a wide screen and stacked on a narrow one. */

.ark-add-player[b-893y9xuqvq] {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md, 1rem);
    flex-wrap: wrap;
}

/* One round's card. */

.ark-round-header[b-893y9xuqvq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    margin-block-end: 0.5rem;
}

.ark-round-resting[b-893y9xuqvq] {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* One match: two sides and the set scores between them, the action to the trailing edge. */

.ark-match[b-893y9xuqvq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-block-start: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.ark-match-side[b-893y9xuqvq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 12rem;
}

.ark-match-side-b[b-893y9xuqvq] {
    justify-content: flex-end;
    text-align: end;
}

.ark-match-players[b-893y9xuqvq] {
    color: var(--text-color);
    font-size: var(--text-sm);
}

.ark-match-games[b-893y9xuqvq] {
    color: var(--text-color);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ark-match-sets[b-893y9xuqvq] {
    flex: 1 1 auto;
    min-inline-size: 8rem;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ark-match-action[b-893y9xuqvq] {
    margin-inline-start: auto;
}
/* /Components/Pages/Tv.razor.rz.scp.css */
/* Deliberately dumb: one full-bleed screen, no chrome, no navigation. Rank, name and rating get
   the display face at a size the rest of the app never needs, since someone has to read them
   from across the clubhouse. */

.tv-screen[b-fu72nkqxv8] {
    box-sizing: border-box;
    min-height: 100vh;
    padding: 3rem clamp(1.5rem, 5vw, 5rem);
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
}

.tv-title[b-fu72nkqxv8] {
    margin: 0 0 2rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 3rem;
    letter-spacing: var(--tracking-display);
    color: var(--primary);
}

.tv-empty[b-fu72nkqxv8] {
    font-size: 1.5rem;
    color: var(--muted-foreground);
}

.tv-board[b-fu72nkqxv8] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
}

.tv-row[b-fu72nkqxv8] {
    display: grid;
    grid-template-columns: 5rem 1fr 7rem;
    grid-template-areas:
        "rank name rating"
        "rank meta rating";
    align-items: center;
    column-gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
}

.tv-row:first-child[b-fu72nkqxv8] {
    border-top: 1px solid var(--border);
}

.tv-rank[b-fu72nkqxv8] {
    grid-area: rank;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.tv-name[b-fu72nkqxv8] {
    grid-area: name;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.1;
    /* Long names truncate rather than wrap into the row below and collide with the rank/rating columns, which stay vertically centred across both grid rows. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tv-rating[b-fu72nkqxv8] {
    grid-area: rating;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--primary);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.tv-meta[b-fu72nkqxv8] {
    grid-area: meta;
    font-size: 1.25rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}