/* Self-hosted DM Sans — eliminates render-blocking Google Fonts request */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html, body {
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* Painted statically rather than by the MudBlazor theme: when a phone suspends the
       PWA the circuit dies and the theme's injected styles can go with it, which used to
       flash the page white on resume. Also covers iOS overscroll beyond the safe area. */
    background-color: var(--surface-page);
    color-scheme: light;
}

/* === Club Theme Overrides === */

/* MudBlazor AppBar customization */
.mud-appbar {
    background: var(--gradient-appbar) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
}

/* MudBlazor Paper/Card styling */
.mud-paper {
    background: var(--gradient-card) !important;
    border: 1px solid color-mix(in srgb, var(--ink) 5%, transparent) !important;
    position: relative;
}

/* Accent top-line effect on elevated papers */
.mud-paper.mud-elevation-2::before,
.mud-paper.mud-elevation-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--club-accent) 30%, transparent), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Table overrides */
.mud-table .mud-table-head .mud-table-row .mud-table-cell {
    color: color-mix(in srgb, var(--club-primary-bright) 60%, transparent) !important;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom-color: color-mix(in srgb, var(--ink) 6%, transparent) !important;
}

.mud-table .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom-color: color-mix(in srgb, var(--ink) 4%, transparent) !important;
}

.mud-table .mud-table-body .mud-table-row:hover {
    background: color-mix(in srgb, var(--ink) 3%, transparent) !important;
}

.mud-table .mud-table-body .mud-table-row.mud-table-row-striped:nth-child(even) {
    background: color-mix(in srgb, var(--ink) 2%, transparent) !important;
}

/* Tab overrides */
.mud-tabs .mud-tab.mud-tab-active {
    color: var(--club-primary-bright) !important;
}

.mud-tabs .mud-tab-slider {
    background: var(--club-primary-bright) !important;
}

/* Dialog styling */
.mud-dialog {
    background: var(--gradient-card) !important;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
}

/* Input field focus */
.mud-input.mud-input-underline::after {
    border-bottom-color: var(--club-primary-bright) !important;
}

/* Progress linear */
.mud-progress-linear .mud-progress-linear-bar {
    border-radius: 4px;
}

/* Chip overrides for formation badge */
.mud-chip.mud-chip-color-secondary {
    background: color-mix(in srgb, var(--club-primary) 12%, transparent) !important;
    color: var(--club-primary-bright) !important;
    border: 1px solid color-mix(in srgb, var(--club-primary) 20%, transparent) !important;
}

/* Snackbar */
/* Success stays green regardless of club primary — a red club would otherwise
   get error-looking success toasts */
.mud-snackbar.mud-alert-filled-success {
    background: var(--gradient-accent) !important;
    color: #fff !important;
}

/* Separator line */
.gold-separator {
    height: 1px;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--club-primary-bright) 10%, transparent), transparent);
    margin: 24px 0;
}

/* Navigation links in top bar */
.topbar-nav-link {
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none !important;
    min-height: auto !important;
}

.topbar-nav-link:hover {
    color: color-mix(in srgb, var(--ink) 80%, transparent) !important;
    background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
}

.topbar-nav-link.active,
.topbar-nav-link[aria-current="page"] {
    color: var(--club-primary-bright) !important;
    background: color-mix(in srgb, var(--club-primary) 10%, transparent) !important;
}

/* Hide MudNavLink default icon area in top bar */
.topbar-nav-link .mud-nav-link-icon {
    display: none;
}

/* Gold button style */
.btn-gold {
    background: var(--gradient-primary) !important;
    color: var(--club-on-primary) !important;
    font-weight: 600 !important;
    border: none !important;
}

.btn-gold:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

/* Ghost button */
.btn-ghost {
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent) !important;
    color: color-mix(in srgb, var(--ink) 60%, transparent) !important;
}

.btn-ghost:hover {
    border-color: color-mix(in srgb, var(--ink) 30%, transparent) !important;
    color: color-mix(in srgb, var(--ink) 90%, transparent) !important;
}

/* Badge styles */
.badge-gold {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--club-primary) 12%, transparent);
    color: var(--club-primary-bright);
    border: 1px solid color-mix(in srgb, var(--club-primary) 20%, transparent);
}

.badge-teal {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--club-accent) 12%, transparent);
    color: var(--club-accent-bright);
    border: 1px solid color-mix(in srgb, var(--club-accent) 20%, transparent);
}

.badge-guest {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-guest) 12%, transparent);
    color: var(--color-guest-bright);
    border: 1px solid color-mix(in srgb, var(--color-guest) 20%, transparent);
}

.badge-venue {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

/* Page header styling */
.page-header-subtitle {
    color: color-mix(in srgb, var(--ink) 45%, transparent);
    font-size: 0.85rem;
}

/* Card label */
.card-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: color-mix(in srgb, var(--club-primary-bright) 60%, transparent);
    margin-bottom: 16px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--ink) 2%, transparent);
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ink) 30%, transparent);
}

/* Fix: MudPopoverProvider sits before MudLayout in DOM — collapse it to zero height
   so it doesn't push content down when popovers open. Do NOT set position or z-index
   here, as that creates a stacking context that traps popovers behind the dialog. */
.mud-popover-provider {
    height: 0 !important;
    overflow: visible;
}

/* Fix: MudSelect dropdown double scrollbar — MudBlazor v9 only sets overflow:hidden on
   menu popovers (:has(>.mud-menu-list)) but not select popovers. The .mud-popover gets
   a scrollbar AND .mud-popover .mud-list also has overflow-y:auto, producing two nested
   scrollbars. Mirror the menu fix for select lists. */
.mud-popover:has(> .mud-list) {
    overflow: hidden;
}

/* Blazor error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Touch drag support (see js/drag-drop-touch.js): the browser must not claim
   touches on draggable chips for scrolling, text selection, or the iOS callout,
   or the synthetic drag never starts. Scrolling still works from anywhere else. */
[draggable="true"] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

/* --- Mobile navigation & PWA safe areas --- */

/* Hamburger only on small screens; inline nav links only on larger ones */
.nav-hamburger {
    display: none !important;
}

@media (max-width: 700px) {
    .topbar-nav {
        display: none !important;
    }

    .nav-hamburger {
        display: inline-flex !important;
    }

    .mud-appbar .ml-2.mr-8 {
        margin-right: 8px !important;
    }
}

/* --- App title / home link --- */

.app-title-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}

.app-title-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background-color: var(--club-logo-bg);
    background-image: var(--club-logo);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex: none;
}

.app-title-text {
    font-size: 1.15rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Squad table --- */

/* Alternative positions and the row actions hug the right edge of the table */
.players-table .cell-right {
    justify-content: flex-end;
}

.players-table .cell-right .badge-teal:last-child {
    margin-right: 0 !important;
}

/* Shirt number sits in its own # column on wide screens */
.shirt-inline {
    display: none;
}

/* 599.98px is where MudBlazor stacks a table into per-row cards (its xs breakpoint),
   so these rules and that layout switch together. */
@media (max-width: 599.98px) {
    /* MudBlazor's stacked card prints the column label beside every cell, which on
       this table is far more label than data. Lay each row out as a grid instead:
       name + preferred position share the first line, alternatives get the second,
       the row actions the third. The table parts have to stop being table boxes
       for the row to become a grid container. */
    .players-table .mud-table-root,
    .players-table .mud-table-body {
        display: block;
        width: 100%;
    }

    .players-table .mud-table-body .mud-table-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 6px;
        padding: 10px 14px;
    }

    .players-table .mud-table-body .mud-table-row:not(:last-child) {
        border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    }

    .players-table .mud-table-body .mud-table-cell {
        border: none !important;
        padding: 0 !important;
    }

    /* Position and name read fine without their labels once they are in columns */
    .players-table .mud-table-body .mud-table-cell::before {
        display: none !important;
    }

    /* A whole card row just for the number is wasteful: drop the # cell and print
       the number next to the name instead. */
    .players-table th:first-child,
    .players-table td[data-label="#"] {
        display: none !important;
    }

    .shirt-inline {
        display: inline;
        margin-right: 6px;
        font-weight: 700;
        color: var(--club-primary-bright);
    }

    .players-table .cell-name {
        min-width: 0;
    }

    /* Sized on the wrapper, not the cell: MudBlazor's dense-table rule for
       .mud-table-cell outspecifies a plain .cell-name selector */
    .players-table .cell-name .player-name-cell {
        font-size: 1rem;
    }

    .players-table .cell-pref {
        justify-content: flex-end;
    }

    /* Alternatives and the actions each take a full-width line of their own */
    .players-table .cell-alt,
    .players-table .cell-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* A player without alternatives should not get a blank line */
    .players-table .cell-alt:not(:has(.badge-gold)) {
        display: none;
    }

    /* The row's own gap does the spacing here */
    .players-table .cell-alt .badge-gold {
        margin-right: 0 !important;
    }
}

@media (max-width: 700px) {
    /* Logged-in admin name costs room the nav needs on a phone */
    .admin-name {
        display: none !important;
    }
}

/* --- Reconnect overlay ---
   Blazor's stock overlay is light and reads as "the app went white" when a phone
   suspends the tab. Keep it on-theme, and pwa.js reloads once reconnecting fails. */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface-page) 92%, transparent);
    color: color-mix(in srgb, var(--ink) 85%, transparent);
    font-size: 0.95rem;
    text-align: center;
    padding: 24px;
}