/* ============================================================
   Court Series Design System – Global Styles
   ============================================================ */

/* ---- Design Tokens ---- */
:root {
    /* Status colors */
    --status-completed-bg:   rgba(34, 197, 94, 0.12);
    --status-completed-fg:   #15803D;
    --status-in-progress-bg: rgba(245, 158, 11, 0.12);
    --status-in-progress-fg: #B45309;
    --status-upcoming-bg:    rgba(59, 130, 246, 0.12);
    --status-upcoming-fg:    #1D4ED8;
    --status-pending-approval-bg: rgba(249, 115, 22, 0.12);
    --status-pending-approval-fg: #C2410C;
    --status-disputed-bg:    rgba(220, 38, 38, 0.08);
    --status-disputed-fg:    #B91C1C;
    --status-disputed-border: rgba(220, 38, 38, 0.35);

    /* Rank badge colors */
    --rank-gold-bg:   rgba(212, 160, 23, 0.12);
    --rank-gold-fg:   #D4A017;
    --rank-silver-bg: rgba(156, 163, 175, 0.15);
    --rank-silver-fg: #6B7280;
    --rank-bronze-bg: rgba(217, 119, 6, 0.12);
    --rank-bronze-fg: #D97706;

    /* League promotion / relegation slot tints (group cards). */
    --promotion-row-bg:      rgba(34, 197, 94, 0.06);
    --promotion-marker-bg:   rgba(34, 197, 94, 0.18);
    --relegation-row-bg:     rgba(220, 38, 38, 0.06);
    --relegation-marker-bg:  rgba(220, 38, 38, 0.18);

    /* Recent form W/L chips */
    --form-win-bg:  #dcfce7;
    --form-win-fg:  #15803D;
    --form-loss-bg: #fee2e2;
    --form-loss-fg: #B91C1C;

    /* Structural borders */
    --border-subtle: rgba(26, 58, 92, 0.08);
    --border-light:  rgba(26, 58, 92, 0.10);

    /* Surface / tint tokens (CourtNavy & AceTeal at various opacities) */
    --navy-tint-2:    rgba(26, 58, 92, 0.02);
    --navy-tint-3:    rgba(26, 58, 92, 0.03);
    --navy-tint-4:    rgba(26, 58, 92, 0.04);
    --navy-tint-6:    rgba(26, 58, 92, 0.06);
    --navy-tint-30:   rgba(26, 58, 92, 0.30);
    --navy-tint-70:   rgba(26, 58, 92, 0.70);
    --teal-tint-4:    rgba(13, 148, 136, 0.04);
    --teal-tint-6:    rgba(13, 148, 136, 0.06);
    --teal-tint-10:   rgba(13, 148, 136, 0.10);
    --teal-tint-20:   rgba(13, 148, 136, 0.20);
    --teal-tint-30:   rgba(13, 148, 136, 0.30);
    --draw-connector: rgba(13, 148, 136, 0.45);
    --warning-glow:   rgba(245, 158, 11, 0.45);

    /* ChalkWhite — the Court Series background/alt surface color. */
    --chalk-white: #F5F5F0;

    /* DeepCourt — the Court Series AppBar/sidebar background. */
    --deep-court: #0F2440;

    /* Shadow tokens */
    --shadow-sm:  0 1px 3px rgba(26, 58, 92, 0.06);
    --shadow-md:  0 6px 20px rgba(26, 58, 92, 0.10);
    --shadow-xs:  0 2px 8px rgba(26, 58, 92, 0.08);

    /* League slot colors (AceTeal) */
    --league-slot-color:    #0D9488;
    --league-slot-bg:       rgba(13, 148, 136, 0.06);
    --league-slot-bg-hover: rgba(13, 148, 136, 0.12);
    --league-slot-claimed-bg: rgba(13, 148, 136, 0.18);
    --league-slot-mine-fg:  #15803D;
    --league-slot-mine-bg:  rgba(34, 197, 94, 0.15);
    --league-slot-mine-border: #22C55E;

    /* Scheduling calendar tokens */
    --scheduling-grid-gap:      rgba(26, 58, 92, 0.08);
    --scheduling-header-border: var(--mud-palette-primary);
    --scheduling-time-color:    var(--mud-palette-text-primary);
    --scheduling-time-font:     0.95rem;
    --scheduling-time-weight:   600;
    --scheduling-slot-bg:       #fff;
    --scheduling-slot-hover:    var(--teal-tint-6);
    --scheduling-closed-bg:     #f5f5f5;
    --scheduling-closed-color:  var(--mud-palette-text-disabled);
    --scheduling-month-hover:   var(--teal-tint-6);
    --scheduling-today-bg:      var(--navy-tint-6);
    --scheduling-today-border:  var(--mud-palette-primary);

    /* Court surface type colors */
    --surface-clay:  #C2613A;
    --surface-hard:  #4A7AB5;
    --surface-grass: #3A8F47;

    /* Tenant-overridable primary color token */
    --tc-primary: #1A3A5C;
}

/* ---- Auth Splash Screen ---- */
.auth-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: auth-splash-in 0.6s ease-out;
}

.auth-splash img {
    width: 312px;
    height: auto;
    animation: auth-logo-pulse 2s ease-in-out infinite;
}

@keyframes auth-splash-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes auth-logo-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50%      { opacity: 1;   transform: scale(1);    }
}

/* ---- Card Hover Lift ---- */
.elevated-element {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.elevated-element:hover {
    box-shadow: var(--mud-elevation-8);
    transform: translateY(-2px);
}

/* ---- Competition Status Colors (chips and badges) ---- */
.status-completed {
    background-color: var(--status-completed-bg) !important;
    color: var(--status-completed-fg) !important;
    border: none !important;
}

.status-in-progress {
    background-color: var(--status-in-progress-bg) !important;
    color: var(--status-in-progress-fg) !important;
    border: none !important;
}

.status-upcoming {
    background-color: var(--status-upcoming-bg) !important;
    color: var(--status-upcoming-fg) !important;
    border: none !important;
}

.status-pending-approval {
    background-color: var(--status-pending-approval-bg) !important;
    color: var(--status-pending-approval-fg) !important;
    border: none !important;
}

/* ============================================================
   Match Card (mc-*) — Premium Scoreboard Component
   ============================================================ */

/* ─── Card Shell ─── */
.mc {
    position: relative;
    display: flex;
    min-width: 240px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--border-light);
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    box-shadow: var(--shadow-sm);
}

.mc:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--teal-tint-30);
    transform: translateY(-1px);
}

.mc:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

.mc.mc--bye {
    cursor: default;
    pointer-events: none;
}
.mc.mc--bye:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-light);
    transform: none;
}

/* ─── Status Strip (left edge) ─── */
.mc__status-strip {
    width: 4px;
    flex-shrink: 0;
    border-radius: 10px 0 0 10px;
    background: var(--border-light);
    transition: background 0.2s ease;
}

.mc-status--final    .mc__status-strip { background: var(--mud-palette-success); }
.mc-status--live     .mc__status-strip { background: var(--mud-palette-warning); }
.mc-status--awaiting .mc__status-strip { background: var(--status-pending-approval-fg); }
.mc-status--pending  .mc__status-strip { background: var(--border-subtle); }

/* ─── Card Body ─── */
.mc__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ─── Team Row ─── */
.mc__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 8px;
    min-height: 36px;
    transition: background-color 0.15s ease;
}

.mc__row--winner {
    background: var(--teal-tint-6);
}

.mc__row--pending {
    opacity: 0.55;
}

/* ─── Team Name Area ─── */
.mc__team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.mc__seed {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--navy-tint-6);
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.3;
}

.mc__name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1.35;
}

.mc__row--winner .mc__name {
    font-weight: 700;
    color: var(--mud-palette-primary-darken);
}

.mc__name--tentative {
    opacity: 0.5;
    font-style: italic;
}

/* ─── Retired Badge ─── */
.mc__ret {
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--form-loss-fg);
    background: var(--form-loss-bg);
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.4;
}

/* ─── Scores Area ─── */
.mc__scores {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.mc__set {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    min-width: 18px;
    text-align: center;
    padding: 2px 3px;
    border-radius: 3px;
    line-height: 1.2;
}

.mc__set--won {
    font-weight: 600;
    color: var(--mud-palette-primary-darken);
}

.mc__total {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    min-width: 20px;
    text-align: center;
    padding: 2px 4px;
    margin-left: 4px;
    border-radius: 4px;
    background: var(--navy-tint-4);
    line-height: 1.2;
}

.mc__total--won {
    font-weight: 800;
    color: var(--mud-palette-primary-darken);
    background: var(--teal-tint-10);
}

/* ─── Row Divider ─── */
.mc__divider {
    height: 1px;
    margin: 0 12px;
    background: var(--border-subtle);
}

/* Divider-embedded round marker. Opt-in (ShowRound) so only the
   competition schedule grid uses it — bracket view and match lists
   keep the plain 1px line. */
.mc__divider--with-round {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 2px 12px;
    background: transparent;
}
.mc__divider--with-round::before,
.mc__divider--with-round::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}
.mc__divider-round {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    background: var(--navy-tint-6);
    padding: 1px 6px;
    border-radius: 3px;
    line-height: 1.3;
    white-space: nowrap;
}

/* ─── Live Pulse Dot ─── */
.mc__live-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
    animation: mc-pulse 1.8s ease-in-out infinite;
}

@keyframes mc-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--warning-glow); }
    50%      { opacity: 0.7; box-shadow: 0 0 0 5px transparent; }
}

/* ─── Awaiting Approval Badge ─── */
.mc-status--awaiting {
    background: var(--status-pending-approval-bg);
}
.mc__awaiting-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--status-pending-approval-fg);
    opacity: 0.8;
    animation: mc-await-pulse 2.4s ease-in-out infinite;
}

@keyframes mc-await-pulse {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 0.4; }
}

.mc__schedule {
    display: flex;
    gap: 12px;
    padding: 4px 12px 6px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}
.mc__schedule-item {
    display: flex;
    align-items: center;
    gap: 2px;
}
.mc__schedule-item .mud-icon-root {
    font-size: 0.8125rem;
}

/* ─── Responsive: tighter on small viewports ─── */
@media (max-width: 599.98px) {
    .mc { min-width: 200px; }
    .mc__row { padding: 6px 10px; }
    .mc__name { font-size: 0.75rem; }
    .mc__total { font-size: 0.8125rem; }
    .mc__set { font-size: 0.6875rem; min-width: 16px; }
    .mc__divider { margin: 0 10px; }
}

/* Legacy compat – kept for MatchResultTable & other consumers */
.completed-match-card   { border-left: 3px solid var(--mud-palette-success); }
.in-progress-match-card      { border-left: 3px solid var(--mud-palette-warning); }
.pending-approval-match-card { border-left: 3px solid var(--mud-palette-info); }
.match-winner-row {
    font-weight: 700;
    color: var(--mud-palette-primary-darken);
    background-color: var(--teal-tint-6);
}

/* ---- Profile Images ---- */
.profile-image {
    border: 2px solid var(--mud-palette-secondary);
    border-radius: 50%;
}

.image-container {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--mud-palette-secondary);
    margin: 0 auto;
    margin-top: 1.5rem;
}

.image-container .profile-image {
    border-radius: unset;
    border: none;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.adm-avatar .profile-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
    border: none;
}

.pp-hero-photo .profile-image,
.h2h-player-photo .profile-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}

/* ---- Rankings – Top 3 Accent ---- */
.rank-gold   { color: var(--rank-gold-fg);   font-weight: 700; }
.rank-silver { color: var(--rank-silver-fg); font-weight: 700; }
.rank-bronze { color: var(--rank-bronze-fg); font-weight: 700; }

/* ---- Court Line Gradient Divider ---- */
.court-divider {
    height: 3px;
    background: linear-gradient(90deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 50%, var(--mud-palette-primary) 100%);
    border-radius: 2px;
    margin: 8px 0;
}

/* ---- Court Edit Dialog ---- */
/* Sticky tab header so tabs stay visible when the tab body scrolls. MudBlazor has no
   out-of-box sticky-tabs switch, so this stays. */
.edit-court-dialog .edit-court-dialog-tabs .mud-tabs-header {
    background-color: var(--mud-palette-background);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Mobile: all court-admin dialogs go edge-to-edge (MudDialog's FullScreen option is
   all-or-nothing, not responsive — hence the media query). */
@media (max-width: 599px) {
    .edit-court-dialog.mud-dialog,
    .new-court-dialog.mud-dialog,
    .new-closure-dialog.mud-dialog {
        margin: 0 !important;
        max-height: 100dvh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        width: 100vw !important;
        border-radius: 0 !important;
    }

    .edit-court-dialog .mud-dialog-content,
    .new-court-dialog .mud-dialog-content,
    .new-closure-dialog .mud-dialog-content {
        max-height: none !important;
    }
}

/* Pre-existing: weekly-hours row hover — unchanged from before this redesign */
.edit-court-dialog .weekly-hours-row,
.weekly-hours-row {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease;
}

.edit-court-dialog .weekly-hours-row:hover,
.weekly-hours-row:hover {
    background-color: var(--navy-tint-4);
    border-color: var(--border-subtle);
}

/* Mobile: edge-to-edge dialog since MudBlazor's FullScreen is all-or-nothing,
   not responsive. Same pattern as edit-court / new-closure dialogs above. */
@media (max-width: 599px) {
    .create-weekly-slot-pool-dialog.mud-dialog {
        margin: 0 !important;
        max-height: 100dvh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        width: 100vw !important;
        border-radius: 0 !important;
    }

    .create-weekly-slot-pool-dialog .mud-dialog-content {
        max-height: none !important;
    }
}

/* ---- Dashboard Section Headers ---- */
.section-header {
    display: flex;
    align-items: center;
    padding: 12px 0 8px 0;
    border-bottom: 2px solid var(--border-subtle);
    margin-bottom: 12px;
}

/* ---- Utility ---- */
.bold-text            { font-weight: 600; }
.icon-text-row        { display: flex; align-items: center; gap: 4px; }
.text-center          { text-align: center; }
.text-italic          { font-style: italic; }
.description-text     { line-height: 1.75; overflow-wrap: break-word; word-break: break-word; white-space: pre-wrap; max-width: 100%; }
.ce-hero-title        { font-weight: 700; text-align: center; }
.comp-name-bold       { font-weight: 700; line-height: 1.3; }
/* ============================================================
   Match Dialog (md-*) — Detailed Match View
   ============================================================ */

.md-dialog { min-width: 420px; }

/* ─── Title ─── */
.md-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-primary);
}

/* ─── Matchup Hero ─── */
.md-hero {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--navy-tint-3);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    padding: 20px 12px;
    margin-bottom: 16px;
}

.md-hero__team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.md-hero__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}

.md-hero__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 16px;
}

.md-hero__score {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mud-palette-primary-darken);
}

.md-hero__score--pending {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.md-hero__score--pending-approval {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--status-pending-approval-fg);
    opacity: 0.85;
}

/* ─── Pending Approval Component (inside MatchDialog) ─── */
.md-pending-approval__banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--status-pending-approval-bg);
    border-left: 3px solid var(--status-pending-approval-fg);
}
.md-pending-approval__banner-icon {
    color: var(--status-pending-approval-fg);
    margin-top: 1px;
    flex-shrink: 0;
}
.md-pending-approval__banner-text {
    color: var(--status-pending-approval-fg);
    font-weight: 500;
    line-height: 1.5;
}
.md-pending-approval__details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0 4px;
}
.md-pending-approval__detail-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.md-pending-approval__detail-icon {
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    flex-shrink: 0;
}
.md-pending-approval__expires {
    color: var(--mud-palette-text-secondary);
}
.md-pending-approval__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
}

/* ─── Pending Approvals Page Cards ─── */
.pa-card {
    padding: 16px;
    border-radius: 12px !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pa-card__matchup {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pa-card__score {
    display: flex;
    align-items: center;
}
.pa-card__score-value {
    font-weight: 700;
    color: var(--status-pending-approval-fg);
    letter-spacing: -0.01em;
}

/* ─── Disputed Submissions Cards ─── */
.ds-card {
    padding: 16px;
    border-radius: 12px !important;
    border-left: 4px solid var(--status-disputed-fg) !important;
    background: linear-gradient(135deg, var(--status-disputed-bg) 0%, transparent 60%);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ds-card:hover {
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.12);
    transform: translateY(-1px);
}
.ds-card__matchup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.ds-card__score-label {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
}
.ds-card__score-value {
    font-weight: 700;
    color: var(--status-disputed-fg);
    letter-spacing: -0.01em;
    text-decoration: line-through;
    opacity: 0.75;
}
.ds-card__reason {
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--status-disputed-bg);
    border: 1px solid var(--status-disputed-border);
}
.ds-card__reason-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--status-disputed-fg);
    margin-bottom: 2px;
}
.ds-card__reason-text {
    font-style: italic;
    color: var(--mud-palette-text-primary);
    line-height: 1.45;
}
.status-disputed {
    background-color: var(--status-disputed-bg) !important;
    color: var(--status-disputed-fg) !important;
    border: none !important;
}
.ds-card__intervention-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(220, 38, 38, 0.05);
    color: var(--status-disputed-fg);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ─── Actions Bar ─── */
.md-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 12px;
}

.md-actions__label {
    font-weight: 700;
    letter-spacing: 0;
    color: var(--mud-palette-primary);
}

/* ─── Match Details Scoreboard ─── */
.md-details {
    display: flex;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    overflow: hidden;
    margin-top: 8px;
}

.md-details__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    background: var(--navy-tint-4);
    border-right: 1px solid var(--border-light);
    flex-shrink: 0;
}

.md-details__meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.md-details__meta-icon {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 1rem !important;
}

.md-details__scoreboard {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.md-details__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
    transition: background-color 0.15s ease;
}

.md-details__row--winner {
    background: var(--teal-tint-6);
}

.md-details__row--winner .md-details__team-name {
    font-weight: 700;
    color: var(--mud-palette-primary-darken);
}

.md-details__row--winner .md-details__sets {
    font-weight: 800;
    color: var(--mud-palette-primary-darken);
    background: var(--teal-tint-10);
}

.md-details__team-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.md-details__scores {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.md-details__game {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    min-width: 20px;
    text-align: center;
    padding: 2px 4px;
}

.md-details__sets {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    min-width: 24px;
    text-align: center;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 5px;
    background: var(--navy-tint-4);
}

.md-details__separator {
    height: 1px;
    margin: 0 14px;
    background: var(--border-subtle);
}

/* ─── Form Section (shared by result edit + time/court edit) ─── */
.md-form-section {
    border-top: 1px solid var(--border-light);
    padding-top: 16px;
    margin-top: 16px;
}

.md-form-section__heading {
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--mud-palette-primary) !important;
    margin-bottom: 12px;
}

/* ─── Result Edit: Set Rows ─── */
.md-result-sets {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.md-result-set {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.md-result-set__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.md-result-set__fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.md-result-set__dash {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* ─── Retired Section ─── */
.md-retired-section {
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
    margin-top: 16px;
}

/* ─── Responsive ─── */
@media (max-width: 599.98px) {
    .md-dialog {
        min-width: unset;
        width: 100%;
    }

    .md-dialog .profile-image {
        max-width: 64px;
        max-height: 64px;
    }

    .md-hero {
        padding: 14px 8px;
    }

    .md-hero__score {
        font-size: 1.375rem;
    }

    .md-hero__center {
        padding: 0 10px;
    }

    .md-hero__name {
        font-size: 0.75rem;
    }

    .md-details {
        flex-direction: column;
    }

    .md-details__meta {
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding: 8px 14px;
    }

    .md-details__meta-item {
        font-size: 0.6875rem;
    }
}

/* Legacy compat — kept for other dialogs that may still reference */
.match-dialog-content { min-width: 400px; }

/* ---- KPI Summary Cards ---- */
.kpi-completed   { border-left: 4px solid var(--mud-palette-success); }
.kpi-in-progress { border-left: 4px solid var(--mud-palette-warning); }
.kpi-upcoming    { border-left: 4px solid var(--mud-palette-info); }

.kpi-label-completed   { color: var(--status-completed-fg);   font-weight: 600; letter-spacing: 0.1em; }
.kpi-label-in-progress { color: var(--status-in-progress-fg); font-weight: 600; letter-spacing: 0.1em; }
.kpi-label-upcoming    { color: var(--status-upcoming-fg);    font-weight: 600; letter-spacing: 0.1em; }

/* compact on xs so all 3 KPI tiles sit in one row */
@media (max-width: 599px) {
    .kpi-card    { padding: 10px 8px !important; }
    .kpi-icon-sm { display: none !important; }
}

/* ---- Icon Colors ---- */
.icon-completed   { color: var(--mud-palette-success); }
.icon-in-progress { color: var(--mud-palette-warning); }
.icon-upcoming    { color: var(--mud-palette-info); }
.icon-navy        { color: var(--mud-palette-primary); }

/* ---- Smart Search ---- */
.cs-search {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px 20px 12px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cs-search:focus-within {
    border-color: var(--mud-palette-secondary);
    box-shadow: 0 0 0 3px var(--teal-tint-10), var(--shadow-xs);
}

.cs-search-field .mud-input-outlined .mud-input-outlined-border {
    border-color: transparent !important;
}

.cs-search-field .mud-input-adornment-start .mud-icon-root {
    color: var(--mud-palette-primary);
    transition: color 0.2s ease;
}

.cs-search:focus-within .cs-search-field .mud-input-adornment-start .mud-icon-root {
    color: var(--mud-palette-secondary);
}

.cs-search-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding-left: 4px;
}

.cs-hint-chip {
    background: var(--navy-tint-4) !important;
    color: var(--mud-palette-primary) !important;
    font-size: 0.7rem !important;
    height: 22px !important;
    letter-spacing: 0.03em;
    opacity: 0.7;
    cursor: default !important;
}

/* Category filter popover — width, height, and checkbox row hover
   (MudMenu's default popover has no width cap; long category names
   would otherwise stretch it off-screen, and the checkbox list needs
   a scroll cap for tenants with many categories) */
.cs-category-popover {
    min-width: 280px;
    max-width: 340px;
}

.cs-category-menu {
    display: flex;
    flex-direction: column;
}

.cs-category-list {
    max-height: 260px;
    overflow-y: auto;
    padding-bottom: 4px;
}

.cs-category-item {
    display: flex;
    padding: 2px 6px;
    margin: 0;
    border-radius: 6px;
    transition: background-color 0.12s ease;
}

.cs-category-item:hover {
    background: var(--navy-tint-4);
}

/* Active-filter row — sits between the search row and the hint row */
.cs-active-row {
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle);
}

.cs-active-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem !important;
    opacity: 0.55;
    font-weight: 500;
}

/* ---- Empty State ---- */
.empty-state-icon { font-size: 4rem; color: var(--mud-palette-primary); }

/* ---- Competition Status Border (Dashboard Paper Row) ---- */
.competition-border-completed   { border-left: 4px solid var(--mud-palette-success); }
.competition-border-in-progress { border-left: 5px solid var(--mud-palette-warning); }
.competition-border-upcoming    { border-left: 4px solid var(--mud-palette-info); }

/* ---- Competition Dashboard Image ---- */
.competition-paper-image { width: 130px; height: 130px; flex-shrink: 0; object-fit: cover; }

/* ---- Competition Dashboard Item Paper ---- */
.cdip-image     { width: 130px; min-width: 130px; height: 100%; object-fit: cover; flex-shrink: 0; }
.cdip-dim       { opacity: 0.72; filter: grayscale(15%); }
.cdip-bg-active { background: rgba(245, 158, 11, 0.04); }

/* ---- Urgent Deadline ---- */
.text-urgent { color: var(--status-in-progress-fg) !important; font-weight: 700; }
.icon-urgent { color: var(--status-in-progress-fg) !important; }

/* ---- Match Card ---- */
.match-name-cell   { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-scores-wrap { gap: 6px; flex-shrink: 0; }
.match-set-score   { min-width: 14px; text-align: right; color: var(--mud-palette-text-secondary); }

/* ---- Player Card ---- */
.image-container .mud-avatar { width: 100% !important; height: 100% !important; font-size: 1.75rem !important; font-weight: 600; border-radius: 0 !important; }

/* ---- Competition Details View ---- */
.cd-field { display: flex; flex-direction: column; gap: 3px; }
.cd-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.cd-value { font-weight: 500; color: var(--mud-palette-text-primary); font-size: 0.9375rem; }

/* ---- Competition Card (List View) ---- */
.comp-card-avatar     { width: 52px; height: 52px; border: 2px solid var(--mud-palette-secondary); }
.comp-card-avatar-img { width: 52px; height: 52px; object-fit: cover; }

/* Match type / surface type meta badges */
.comp-meta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.comp-meta-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--navy-tint-6);
    color: var(--mud-palette-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ---- Competition Edit / Details Form ---- */

/* form max-width + centering */
.ce-form-wrap { max-width: 900px; margin: 0 auto; overflow: hidden; }

/* section cards */
.ce-section {
    background: var(--mud-palette-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 20px 20px 24px;
    margin-bottom: 16px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* scope divider inside cards to 2px */
.ce-section .court-divider { height: 2px; margin-bottom: 20px; }

/* section header: icon + overline side by side */
.ce-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.section-label { color: var(--mud-palette-primary); font-weight: 700; letter-spacing: 0.10em; }

/* photo upload zone */
.ce-photo-zone {
    width: 160px;
    height: 160px;
    border: 2px dashed var(--mud-palette-secondary);
    border-radius: 12px;
    background: rgba(13, 148, 136, 0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ce-photo-placeholder-icon {
    font-size: 2.5rem !important;
    color: rgba(13, 148, 136, 0.40) !important;
    pointer-events: none;
}

.ce-photo-image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* hide broken img when no src is set */
.ce-photo-image:not([src]),
.ce-photo-image[src=""] { display: none; }

/* ---- Tenant edit page ---- */
.te-form-wrap                  { max-width: 900px; }
.te-card-full-height           { height: 100%; }
.te-image-preview              { height: 120px; position: relative; overflow: hidden; border-style: dashed; }
.te-image-preview--sm          { height: 100px; overflow: hidden; border-style: dashed; }
.te-image-fill                 { width: 100%; height: 100%; position: absolute; inset: 0; }
.te-favicon-thumb              { max-width: 48px; max-height: 48px; }
.te-placeholder-icon           { font-size: 2rem; opacity: 0.3; }
.te-color-picker               { min-width: 300px; flex: 1; max-width: 500px; }

/* checkbox styled to match outlined field height */
.ce-toggle-card {
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 8px;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 8px 0 4px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ce-toggle-card:hover { border-color: rgba(0, 0, 0, 0.60); }

/* save action bar */
.ce-save-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20px;
    margin-top: 4px;
    border-top: 1px solid var(--border-light);
}

/* ---- Media Embeds ---- */
.media-embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.media-embed-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.gallery-photo-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.15s ease;
}

.gallery-photo-card:hover {
    transform: scale(1.02);
}

.cursor-pointer {
    cursor: pointer;
}

/* mobile adjustments */
@media (max-width: 600px) {
    .ce-section   { padding: 14px 14px 18px; }
    .ce-form-wrap { padding-inline: 0 !important; }
    .ce-photo-zone { width: 120px; height: 120px; }
    .ce-photo-placeholder-icon { font-size: 2rem !important; }
    .ce-toggle-card { min-height: 48px; }
}

/* ---- Player Profile Overview ---- */
.pp-hero-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--mud-palette-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-hero-avatar {
    width: 110px !important;
    height: 110px !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
}

.pp-stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--navy-tint-3);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    text-align: center;
    gap: 4px;
}

.pp-stat-value { font-weight: 700; color: var(--mud-palette-primary); }
.pp-stat-gold  { font-weight: 700; color: var(--mud-palette-tertiary); }

/* ---- Form W/L Chips ---- */
.form-chip-win  { background: var(--form-win-bg)  !important; color: var(--form-win-fg)  !important; font-weight: 700 !important; }
.form-chip-loss { background: var(--form-loss-bg) !important; color: var(--form-loss-fg) !important; font-weight: 700 !important; }

/* ---- Rankings ---- */
.pp-ranking-row + .pp-ranking-row {
    border-top: 1px solid var(--border-subtle);
}

.pp-rank-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-right: 16px;
    background: var(--navy-tint-6);
    color: var(--mud-palette-primary);
}

.pp-rank-badge.pp-rank-1 { background: var(--rank-gold-bg);   color: var(--rank-gold-fg); }
.pp-rank-badge.pp-rank-2 { background: var(--rank-silver-bg); color: var(--rank-silver-fg); }
.pp-rank-badge.pp-rank-3 { background: var(--rank-bronze-bg); color: var(--rank-bronze-fg); }

/* ---- Match W/L/Pending Chips ---- */
.form-chip-pending { background: var(--status-upcoming-bg) !important; color: var(--status-upcoming-fg) !important; font-weight: 700 !important; }

/* ---- Head-to-Head ---- */
.h2h-comparison-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.h2h-player-card,
.h2h-summary-card {
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px var(--navy-tint-6);
}

.h2h-player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
}

.h2h-summary-card {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
}

.h2h-summary-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}


.h2h-player-avatar {
    width: 100px;
    height: 100px;
    font-size: 1.75rem;
    font-weight: 700;
}
.h2h-player-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--mud-palette-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, 0.05);
}

.h2h-player-name {
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h2h-win-pill {
    min-width: 86px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--navy-tint-4);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.h2h-stat-row  { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 6px; }
.h2h-p1-value  { font-weight: 700; color: var(--mud-palette-primary); font-size: 1rem; min-width: 80px; }
.h2h-p2-value  { font-weight: 700; color: var(--mud-palette-primary); font-size: 1rem; min-width: 80px; text-align: right; }
.h2h-stat-label { flex: 1; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; color: var(--mud-palette-text-secondary); font-weight: 600; }

/* Player name in hero blocks */
.pp-hero-name { font-weight: 700; line-height: 1.2; }

/* "This Year" / "Career" sub-section labels */
.pp-stat-sub-label { color: var(--mud-palette-text-secondary); font-weight: 600; display: block; margin-bottom: 8px; }

/* Rankings list: series name cell */
.pp-ranking-series { flex: 1; min-width: 0; font-weight: 500; }

/* Empty-state icon (rankings / smaller contexts) */
.pp-empty-state-icon { font-size: 3rem; }

/* ---- Shared Layout Utilities ---- */
.empty-state-dim { opacity: 0.6; }
.min-w-0         { min-width: 0; }

/* Toggle / match-type button bar (shared across tabs) */
.toggle-row { gap: 8px; flex-wrap: wrap; }

/* Icon + label inline pair */
.meta-item { gap: 4px; }

/* ---- Player Profile Layout ---- */
.pp-hero-block   { gap: 20px; }            /* hero: photo beside content */
.pp-hero-content { min-width: 0; }         /* prevents flex text overflow  */
.pp-meta-row     { gap: 10px; flex-wrap: wrap; } /* hometown · dob · style row */
.pp-form-row     { gap: 6px;  flex-wrap: wrap; } /* W/L chip row              */
.pp-ranking-pts  { flex-shrink: 0; }       /* ranking points column        */

/* ---- Head-to-Head Layout ---- */
.h2h-player-col { gap: 8px; }             /* player column (flex-column)  */
.h2h-center-col { gap: 12px; min-height: 130px; }
.h2h-wins-row   { display: flex; justify-content: center; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.h2h-wins-divider { color: var(--mud-palette-text-secondary); align-self: center; font-weight: 700; }

/* ---- Match Card Score Column ---- */
.match-score-cell { min-width: 18px; text-align: right; }

/* ---- Retired Match Indicators ---- */
.match-retired-badge {
    background-color: var(--form-loss-bg) !important;
    color: var(--form-loss-fg) !important;
    font-weight: 600;
    font-size: 0.65rem;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 6px;
    margin-left: 4px;
}

.match-retired-section {
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
    margin-top: 12px;
}

/* ---- Match Dialog ---- */
/* Score header row: icon + MudText + spacer + action buttons */
.match-dialog-actions { gap: 8px; align-items: center; }
/* Narrow score number column inside MatchDetails */
.match-score-col { width: 10px; }
/* Sub-form section separator inside MatchDialog (result edit / time edit) */
.match-form-section { border-top: 1px solid var(--border-light); padding-top: 16px; margin-top: 16px; }

/* ---- Inline label + field row (used in dialogs) ---- */
.field-row { gap: 12px; align-items: center; }

/* ---- Complete Competition Dialog ---- */
.round-points-input { width: 100px; }

.cc-dialog { min-width: 480px; }

.cc-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-title-icon { color: var(--tc-primary); }
.cc-title-text { color: var(--tc-primary); font-weight: 600; }

.cc-step-dots {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.cc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #CBD5E1;
    transition: background 0.2s ease;
}

.cc-dot-active {
    background: var(--ace-teal, var(--mud-palette-secondary));
}

.cc-winner-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.08), rgba(212, 160, 23, 0.16));
    border: 1px solid rgba(212, 160, 23, 0.3);
}

.cc-winner-trophy { color: var(--mud-palette-tertiary); }
.cc-winner-label { color: #6B7280; letter-spacing: 0.08em; }
.cc-winner-name { color: var(--tc-primary); font-weight: 700; }

.cc-preview-table {
    border-radius: 8px;
    overflow: hidden;
}

.cc-preview-table th {
    background: var(--tc-primary) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cc-points-change {
    font-weight: 600;
    color: var(--ace-teal, var(--mud-palette-secondary));
}

.cc-rank-up { color: #15803D; }
.cc-rank-down { color: #DC2626; }
.cc-rank-same { color: #9CA3AF; }

.cc-penalty-input { width: 120px; }

.cc-points-chip {
    font-weight: 600;
    color: var(--ace-teal, var(--mud-palette-secondary));
}

.cc-loading-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.cc-completed-banner {
    border-radius: 10px;
}

.cc-banner-trophy { color: var(--mud-palette-tertiary); font-size: 1.8rem; }
.cc-banner-title { color: var(--status-completed-fg); font-weight: 600; }

/* Mobile (xs <600px): MudBlazor primitives don't expose viewport-based row/column toggling, */
/* so these media-query rules adapt the dialog's inline layouts to narrow screens. */
@media (max-width: 600px) {
    .cc-dialog { min-width: unset; }

    /* Field rows: stack label-on-top with full-width input so long labels don't crowd the input */
    .cc-dialog .field-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .cc-dialog .field-row .round-points-input { width: 100%; }

    /* Walkover penalty: switch and numeric stack vertically; numeric grows to full width */
    .cc-dialog .cc-penalty-row .cc-penalty-input { width: 100%; }

    /* Winner card: column layout so long doubles team names don't crowd the trophy */
    .cc-dialog .cc-winner-card { flex-direction: column; align-items: center; text-align: center; gap: 8px; }

    /* Stack dialog actions full-width with primary on top (column-reverse because primary is last in DOM) */
    .cc-dialog ~ .mud-dialog-actions,
    .mud-dialog .cc-dialog + .mud-dialog-actions,
    .mud-dialog:has(.cc-dialog) .mud-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }
    .mud-dialog:has(.cc-dialog) .mud-dialog-actions .mud-button-root { width: 100%; margin: 0; }
}

/* ---- Completed Competition Summary ---- */
.ccs-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.ccs-champion {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 16px;
    text-align: center;
}

.ccs-trophy-icon {
    font-size: 3rem !important;
    color: var(--rank-gold-fg);
    margin-bottom: 4px;
}

.ccs-champion-label {
    letter-spacing: 0.15em;
    color: var(--rank-gold-fg);
    font-weight: 700;
}

.ccs-champion-players {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ccs-champion-name-link {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary) !important;
    cursor: pointer;
}

.ccs-champion-name-link:hover {
    text-decoration: underline;
}

.ccs-points-chip {
    margin-top: 4px;
}

.ccs-podium {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    padding: 16px;
}

.ccs-podium-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 100px;
    max-width: 180px;
}

.ccs-podium-first {
    order: 2;
    padding-top: 0;
}

.ccs-podium-second {
    order: 1;
    padding-top: 32px;
}

.ccs-podium-third {
    order: 3;
    padding-top: 32px;
}

.ccs-third-players {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.ccs-third-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ccs-podium-avatar {
    width: 48px;
    height: 48px;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.ccs-avatar-gold {
    background-color: var(--rank-gold-fg) !important;
    color: white !important;
}

.ccs-avatar-silver {
    background-color: var(--rank-silver-fg) !important;
    color: white !important;
}

.ccs-avatar-bronze {
    background-color: var(--rank-bronze-fg) !important;
    color: white !important;
}

.ccs-podium-photos {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 6px;
}

.ccs-podium-name {
    word-break: break-word;
    line-height: 1.3;
    cursor: pointer;
    color: var(--mud-palette-text-primary) !important;
}

.ccs-podium-name:hover {
    text-decoration: underline;
}

.ccs-podium-points {
    color: var(--mud-palette-success);
    font-weight: 600;
    margin-top: 2px;
}

.ccs-final-section {
    margin-top: 8px;
}

.ccs-final-matchup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ccs-final-team {
    flex: 1;
    text-align: center;
    min-width: 120px;
    padding: 8px;
}

.ccs-final-winner {
    font-weight: 700;
}

.ccs-final-score {
    padding: 4px 16px;
}

.ccs-stats-section {
    margin-top: 16px;
}

.ccs-rankings-link {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .ccs-podium {
        gap: 12px;
    }

    .ccs-podium-slot {
        min-width: 70px;
    }

    .ccs-podium-second {
        padding-top: 24px;
    }

    .ccs-podium-third {
        padding-top: 24px;
    }

    .ccs-podium-avatar {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
    }

    .ccs-third-players {
        gap: 10px;
    }

    .ccs-final-matchup {
        flex-direction: column;
        gap: 8px;
    }
}

/* ---- Mobile Table Scroll & Sticky Columns ---- */
.ce-table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 4px;
}

.ce-striped-table {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.ce-striped-table .mud-table-toolbar {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--navy-tint-2);
}

.ce-striped-table .mud-table-head .mud-table-cell {
    background: var(--navy-tint-4);
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    border-bottom: 1px solid var(--border-light);
}

.ce-striped-table .mud-table-cell {
    border-bottom: 1px solid var(--border-subtle);
}

.ce-striped-table .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell {
    background: var(--navy-tint-4);
}

.ce-striped-table .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell {
    background: var(--mud-palette-surface);
}

.ce-striped-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

.ce-striped-table .mud-table-footer,
.ce-striped-table .mud-table-pagination {
    border-top: 1px solid var(--border-light);
    background: var(--navy-tint-2);
}

/* Scroll hint shadow on right edge */
.ce-league-scroll-wrap {
    position: relative;
}

.ce-league-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s;
    z-index: 2;
}

/* Sticky first column (Name / Player) */
.ce-sticky-col {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
}

th.ce-sticky-col { background: var(--mud-palette-surface); }
.ce-striped-table .mud-table-head th.ce-sticky-col {
    background: var(--navy-tint-4);
}

.ce-striped-table .mud-table-body td.ce-sticky-col {
    background: inherit;
    box-shadow: 1px 0 0 var(--border-subtle);
}

/* League table column widths */
.ce-league-th-pos { width: 40px; text-align: center; }
.ce-league-th-player { min-width: 120px; }
.ce-league-th-stat { width: 50px; text-align: center; white-space: nowrap; }

/* Compact table cells on mobile */
@media (max-width: 599px) {
    .ce-league-table .mud-table-cell,
    .ce-league-table .mud-table-head .mud-table-cell {
        padding: 8px 6px;
        font-size: 0.8125rem;
    }

    .ce-group-table .mud-table-cell,
    .ce-group-table .mud-table-head .mud-table-cell {
        padding: 8px 10px;
        font-size: 0.875rem;
    }
}

/* ---- Draw Action Bar ---- */
.draw-actions-row { gap: 12px; align-items: center; flex-wrap: wrap; }
.draw-group-size  { width: 100px; }
.draw-size-select { width: 110px; }
.draw-actions-row-knockout { align-items: stretch; }
.draw-knockout-setup {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.45);
}
.draw-knockout-copy { max-width: 52rem; }
.draw-knockout-help,
.draw-knockout-note { color: var(--mud-palette-text-secondary); }
/* ---- Knockout Draw Bracket ---- */
/* Scroll wrapper keeps the horizontal scrollbar OUTSIDE the bracket's
   flex layout so it cannot steal height from the round columns.       */
.draw-bracket-scroll {
    overflow-x: auto;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--navy-tint-2);
}

.draw-bracket {
    display: flex;
    flex-direction: row;
    padding: 20px;
    align-items: stretch;   /* all rounds share the same height */
    width: max-content;     /* prevent bracket from shrinking to viewport */
}

/* Each round column — 16px padding each side creates the 32px inter-round
   gap that connector pseudo-elements occupy */
.draw-round {
    display: flex;
    flex-direction: column;
    min-width: 240px;
    padding: 0 16px;
}
.draw-round:first-child { padding-left: 0; }
.draw-round:last-child  { padding-right: 0; }

.draw-round-header {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--mud-palette-primary);
    text-align: center;
    padding: 6px 12px;
    background: var(--navy-tint-6);
    border-radius: 8px;
    margin-bottom: 12px;
}

.draw-round-matches {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Pair of two matches — the structural bracket unit.
   flex:1 distributes height equally so item centers land at
   exactly 25% and 75% of the pair — matching the vertical connector. */
.draw-match-pair {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

/* Individual match slot — flex:1 gives both slots equal height */
.draw-match-item {
    flex: 1;
    min-height: 80px;
    display: flex;
    align-items: center;
    padding: 4px 0;
    position: relative;
}
.draw-match-item .mc,
.draw-mobile-match-item .mc,
.sched-match-cell .mc { width: 100%; }

/* ── Incoming horizontal connector (gap-center → left edge of card) ── */
.draw-match-item::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 2px;
    background: var(--draw-connector);
    pointer-events: none;
}

/* ── Outgoing connector — default: simple horizontal (single-item pairs) ── */
.draw-match-item::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 2px;
    background: var(--draw-connector);
    pointer-events: none;
}

/* ── Outgoing bracket connector for two-item pairs ──
   Uses borders so the horizontal→vertical corner is gap-free.
   First item draws the top-right ┐ half, second draws bottom-right ┘ half.
   The two halves overlap by 1px at the pair midpoint for continuity. */
.draw-match-pair .draw-match-item:first-child:not(:last-child)::after {
    top: 50%;
    bottom: -1px;
    height: auto;
    transform: none;
    background: none;
    border-top: 2px solid var(--draw-connector);
    border-right: 2px solid var(--draw-connector);
}
.draw-match-pair .draw-match-item:last-child:not(:first-child)::after {
    top: -1px;
    bottom: 50%;
    height: auto;
    transform: none;
    background: none;
    border-bottom: 2px solid var(--draw-connector);
    border-right: 2px solid var(--draw-connector);
}

/* Vertical connector no longer needed — bracket shape is drawn by items */
.draw-match-pair::before { display: none; }

/* First round has no incoming connectors */
.draw-round:first-child .draw-match-item::before { display: none; }

/* Last round (final) has no outgoing connectors */
.draw-round:last-child .draw-match-pair .draw-match-item::after { display: none; }

/* ── Third place match (inside finals column, below centered finals) ── */
.draw-round--has-third-place {
    position: relative;
    padding-bottom: 140px;          /* reserve space so it doesn't overflow */
}
.draw-third-place {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 16px;
}
.draw-round--has-third-place:last-child .draw-third-place {
    padding-right: 0;
}
.draw-third-place-match {
    width: 100%;
}
.draw-third-place-match .mc {
    width: 100%;
}

/* ── Manual knockout draw bracket ── */
.draw-bracket--manual {
    min-height: 400px;
}

.draw-bracket--manual .draw-round {
    min-width: 280px;
}

/* ---- Manual Round Robin Draw ---- */

.rr-group-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
}

.rr-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--navy-tint-4);
    border-bottom: 1px solid var(--border-light);
}

.rr-group-slots {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 60px;
}

.rr-player-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border: 1px dashed var(--border-light);
    border-radius: 8px;
    min-height: 44px;
    transition: border-color 0.15s, background 0.15s;
}

.rr-player-slot--filled {
    border-style: solid;
    background: var(--teal-tint-4);
    border-color: var(--teal-tint-20);
}

.rr-player-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.rr-player-info .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rr-points-chip {
    flex-shrink: 0;
}

.rr-slot-autocomplete {
    flex: 1;
}

.rr-empty-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px;
}

/* ---- Knockout Draw Generation ---- */

.ko-generate-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.ko-generate-config {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ko-draw-size-field {
    width: 140px;
}

.ko-generate-actions {
    display: flex;
    gap: 10px;
    flex: 1;
    align-items: flex-start;
    padding-top: 4px;
}

.ko-actions-separator {
    border-top: 1px solid var(--border-light);
}

@media (max-width: 599px) {
    .ko-generate-layout {
        flex-direction: column;
        gap: 14px;
    }

    .ko-draw-size-field {
        width: 100%;
    }

    .ko-generate-actions {
        flex-direction: column;
        width: 100%;
        padding-top: 0;
    }
}

/* ---- Round Robin Group Cards (generated draw) ---- */

.rr-group-progress {
    border-radius: 0;
}

.rr-standing-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--navy-tint-6);
}

.rr-standing-row:last-child {
    border-bottom: none;
}

.rr-standing-relegation {
    background: var(--relegation-row-bg);
}

.rr-standing-relegation .rr-standing-pos {
    background: var(--relegation-marker-bg);
    color: var(--mud-palette-error);
}

.rr-standing-promotion {
    background: var(--promotion-row-bg);
}

.rr-standing-promotion .rr-standing-pos {
    background: var(--promotion-marker-bg);
    color: var(--mud-palette-success);
}

.rr-standing-pos {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--border-subtle);
    color: var(--court-navy);
    font-weight: 600;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rr-standing-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

.rr-standing-stats {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.rr-stat-chip {
    font-size: 0.7rem !important;
    height: 22px !important;
    padding: 0 6px !important;
}

.rr-group-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border-light);
    background: var(--navy-tint-2);
}

/* ---- Manual Knockout Draw ---- */

.mkd-slot-card {
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
    padding: 8px 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mkd-slot-card--empty {
    opacity: 0.5;
    background: var(--navy-tint-3);
}

.mkd-slot-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.mkd-empty-row {
    padding: 10px 8px;
    display: flex;
    align-items: center;
}

/* ---- Competition Teams Tab ---- */

/* Rank badge — reuses rank-gold/silver/bronze design tokens */
.ct-rank-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    background: var(--navy-tint-6);
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}
.ct-rank-badge.ct-rank-1 { background: var(--rank-gold-bg);   color: var(--rank-gold-fg); }
.ct-rank-badge.ct-rank-2 { background: var(--rank-silver-bg); color: var(--rank-silver-fg); }
.ct-rank-badge.ct-rank-3 { background: var(--rank-bronze-bg); color: var(--rank-bronze-fg); }

/* Column width constraints (applied to <th> so columns are consistent) */
.ct-th-rank    { width: 60px;  }
.ct-th-pts     { width: 90px;  }
.ct-th-actions { width: 60px;  }

/* Player name cell layout */
.ct-player-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct-player-cell > .mud-image,
.ct-player-cell > .mud-avatar { flex-shrink: 0; }
.ct-player-name {
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Points value */
.ct-points-cell { font-weight: 700; color: var(--mud-palette-primary); }

/* Player count badge in section header */
.ct-player-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0 5px;
    margin-left: 6px;
}

/* Empty state container (teams list + player picker dialogs) */
.ct-empty-state {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

@media (max-width: 599px) {
    .ct-empty-state-cta { width: 100%; }
}

/* ---- Player Picker Dialogs (TeamsDialog / DoublePartnersDialog) ---- */

/* Minimum width for name columns in player selection tables */
.td-min-name { min-width: 140px; }

/* Selected player row highlight */
.player-row-selected { background: var(--border-light) !important; }
.player-row-selected .mud-table-cell { color: var(--mud-palette-primary) !important; font-weight: 600 !important; }

/* ================================================================
   CompetitionDashboardItemPaper (desktop) – layout helpers
   ================================================================ */

/* Content column that sits next to the image */
.cdip-content   { padding: 12px; display: flex; flex-direction: column; flex-grow: 1; gap: 8px; min-width: 0; }
/* Name + status badge row */
.cdip-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
/* MatchType / SurfaceType / Category chips */
.cdip-chips     { display: flex; gap: 6px; flex-wrap: wrap; }
/* Club / date / prize / deadline row */
.cdip-meta      { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
/* Single metadata item: icon + text */
.cdip-meta-item { display: flex; align-items: center; gap: 4px; }
/* Sign-in / unsign action row */
.cdip-actions   { display: flex; gap: 8px; }

/* ================================================================
   CompetitionDashboardItemCard (mobile) – layout helpers
   ================================================================ */
.cdic-chips   { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.cdic-actions { display: flex; gap: 8px; }

/* ================================================================
   Administration – Shared
   ================================================================ */

/* Photo overlay wrapper: contains PlayerImage + camera button */
.adm-photo-wrap {
    position: relative;
    width: fit-content;
    margin: 0 auto 20px;
}

/* Absolutely-positioned camera button in bottom-right of photo */
.adm-photo-btn {
    position: absolute !important;
    bottom: 2px;
    right: 2px;
}

/* Circular avatar used in ClubCard and SeriesItem */
.adm-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-tint-6);
    color: var(--mud-palette-primary);
    font-size: 1.125rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ================================================================
   Administration – ClubCard
   ================================================================ */
.adm-club-card {
    border-radius: 12px !important;
    border: 1px solid var(--border-light) !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.adm-club-card:hover {
    box-shadow: 0 4px 18px rgba(26, 58, 92, 0.14) !important;
    transform: translateY(-2px);
}

/* ================================================================
   Administration – SeriesItem
   ================================================================ */
.series-item-card {
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    transition: box-shadow 0.18s ease;
    margin-bottom: 12px;
}

.series-item-card:hover {
    box-shadow: 0 4px 16px rgba(26, 58, 92, 0.12) !important;
}

.series-meta-row {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-top: 2px;
}

/* ================================================================
   My Matches – Card Layout
   ================================================================ */
.mm-card {
    padding: 16px;
    border-radius: 12px !important;
    border: 1px solid var(--border-light) !important;
}

.mm-profile-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 252, 0.98) 100%);
    box-shadow: 0 12px 28px rgba(26, 58, 92, 0.07);
}

.mm-card__top,
.mm-card__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mm-card__eyebrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mm-competition-name {
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
}
.mm-competition-link {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.15s ease;
}
.mm-competition-link:hover {
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
}

.mm-card__meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mm-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(26, 58, 92, 0.05);
    border: 1px solid var(--border-subtle);
}

.mm-card__body {
    display: grid;
    grid-template-columns: minmax(0, 116px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.mm-card__result {
    border-radius: 14px;
    background: linear-gradient(180deg, var(--teal-tint-10) 0%, var(--teal-tint-4) 100%);
    border: 1px solid rgba(13, 148, 136, 0.16);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.mm-card__label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.mm-card__score {
    font-weight: 700;
    color: var(--mud-palette-primary);
    line-height: 1.15;
}

.mm-card__matchup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.mm-card__team {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 92px;
    min-width: 0;
    padding: 14px 12px;
    border-radius: 14px;
    background: var(--navy-tint-3);
    border: 1px solid var(--border-subtle);
}

.mm-card__team--winner {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(21, 128, 61, 0.22);
    box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.06);
}

.mm-card__versus {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-matchup {
    text-align: center;
}

.mm-team-name {
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.mm-vs {
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mm-result-inline {
    font-weight: 700;
    color: var(--mud-palette-primary);
    letter-spacing: 0.02em;
    text-align: center;
}

.mm-meta-icon {
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

.mm-meta-text {
    color: var(--mud-palette-text-secondary);
    line-height: 1.25;
}

.mm-search {
    max-width: 260px;
}

/* ---- My Matches – Dashboard Inline Section ---- */
.mm-inline-section {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px 16px;
}

.mm-inline-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    margin: 0 -4px;
    border-top: 1px solid var(--border-light);
    border-radius: 6px;
    flex-wrap: wrap;
    transition: background-color 0.15s ease;
}
.mm-inline-row:hover {
    background-color: rgba(13, 148, 136, 0.05);
}
.mm-inline-competition-link {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.mm-inline-competition-link:hover {
    color: var(--mud-palette-primary) !important;
    text-decoration: underline !important;
}

.mm-inline-date {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.mm-inline-teams {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-inline-vs {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    margin: 0 4px;
}

.mm-inline-club {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.mm-inline-court {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .mm-inline-teams {
        flex-basis: 100%;
        order: -1;
    }
}

/* ================================================================
   Rank List Page
   ================================================================ */

/* Row separator */
.rl-row + .rl-row {
    border-top: 1px solid var(--border-subtle);
}

/* Rank badge — circular, matches pp-rank-badge sizing */
.rl-rank-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-right: 16px;
    background: var(--navy-tint-6);
    color: var(--mud-palette-primary);
}

.rl-rank-badge.rl-rank-1 { background: var(--rank-gold-bg);   color: var(--rank-gold-fg); }
.rl-rank-badge.rl-rank-2 { background: var(--rank-silver-bg); color: var(--rank-silver-fg); }
.rl-rank-badge.rl-rank-3 { background: var(--rank-bronze-bg); color: var(--rank-bronze-fg); }

/* Player photo wrapper */
.rl-player-photo {
    flex-shrink: 0;
    margin-right: 16px;
}

/* Player name */
.rl-player-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Points column */
.rl-points-col {
    flex-shrink: 0;
    margin-left: 12px;
}

/* Hover on non-editing rows for admin */
.rl-row {
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
    transition: background 0.15s ease;
}

.rl-row:hover {
    background: var(--navy-tint-3);
}

/* Editing row highlight */
.rl-row-editing {
    background: var(--teal-tint-4) !important;
    border-radius: 8px;
}

/* ── Rank change indicators ── */
.rl-rank-change, .pp-rank-change {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}
.rl-rank-up, .pp-rank-up     { color: var(--mud-palette-secondary); }
.rl-rank-down, .pp-rank-down { color: #DC2626; }

/* Mobile: stack edit fields */
@media (max-width: 599px) {
    .rl-rank-badge {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
        margin-right: 10px;
    }

    .rl-player-photo {
        margin-right: 10px;
    }
}

/* ================================================================
   Administration – Player Duplicates
   ================================================================ */
.player-duplicate-card {
    padding-bottom: 20px;
}

.player-duplicate-header {
    gap: 12px;
    margin-bottom: 14px;
}

.player-duplicate-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.player-duplicate-panel {
    height: 100%;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px;
    background: var(--navy-tint-3);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.player-duplicate-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 76px;
}

/* ---- Main Tab Header (icon-only on mobile) ---- */
.ce-main-tabs-header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ce-main-tabs-header::-webkit-scrollbar { display: none; }

/* Nested tabs (Draw / Schedule sub-tabs) — lighter treatment */
.ce-nested-tabs-header {
    border-bottom: 2px solid var(--border-light);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ce-nested-tabs-header::-webkit-scrollbar { display: none; }

.ce-nested-tabs-panels {
    padding: 16px 0 0;
}

/* ---- Shared Mobile Competition Layout ---- */
.competition-tabs-panels {
    padding: 24px;
}

.schedule-toolbar,
.matches-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin-bottom: 16px;
}

.schedule-toolbar {
    justify-content: flex-end;
}

.schedule-toolbar__date {
    width: min(240px, 100%);
}

.schedule-setup-copy {
    color: var(--mud-palette-text-secondary);
    max-width: 42rem;
}

.matches-toolbar__search {
    width: min(320px, 100%);
}

/* ---- Schedule Table (sched-*) ---- */
.sched-table-wrap {
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.sched-table-wrap .mud-table-container {
    max-height: 70vh;
}

.sched-time-col {
    width: 80px;
    min-width: 80px;
    background: var(--navy-tint-3) !important;
    text-align: center !important;
    vertical-align: middle !important;
    position: sticky;
    left: 0;
    z-index: 2;
}

.sched-court-col {
    min-width: 260px;
    text-align: center !important;
}

.sched-match-cell {
    min-width: 260px;
    vertical-align: middle !important;
    padding: 6px 8px !important;
}

.sched-empty-slot {
    height: 72px;
    border-radius: 8px;
    border: 2px dashed var(--border-light);
    background: var(--navy-tint-2);
}

/* Legacy — kept for any remaining references */
.schedule-grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    position: relative;
}

.schedule-grid {
    display: flex;
    gap: 16px;
    min-width: max-content;
}

.schedule-grid > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
}

.schedule-grid > div > :first-child {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}


.draw-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.draw-mobile-round {
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    padding: 14px;
}

.draw-mobile-round-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: nowrap;
}

.draw-mobile-round-nav .mud-icon-button {
    flex-shrink: 0;
}

.draw-mobile-round-header-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.draw-mobile-round-header {
    margin-bottom: 0;
    flex: 1;
    text-align: center;
}

.draw-mobile-round-counter {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    letter-spacing: 0.06em;
}

.draw-mobile-round-matches {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.draw-mobile-match-item {
    width: 100%;
}

@media (max-width: 959px) {
    .competition-tabs-panels {
        padding: 16px;
    }

    .draw-actions-row,
    .schedule-toolbar,
    .matches-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .draw-actions-row > *,
    .schedule-toolbar > *,
    .matches-toolbar > * {
        width: 100%;
    }

    .draw-group-size,
    .draw-size-select,
    .schedule-toolbar__date,
    .matches-toolbar__search {
        width: 100%;
        max-width: none;
    }

    .schedule-setup-card {
        padding: 16px 16px 20px;
    }

    .ce-save-bar {
        justify-content: stretch;
    }

    .ce-save-bar .mud-button-root {
        width: 100%;
    }

    .match-dialog-content {
        min-width: min(400px, calc(100vw - 32px));
    }

    .md-dialog {
        min-width: min(420px, calc(100vw - 32px));
    }
}

@media (max-width: 599px) {
    .competition-tabs-panels {
        padding: 0;
    }

    /* Edge-to-edge sections on xs (scoped to competition-edit tabs): drop the card outline
       so content uses the full viewport width. A top divider preserves separation between
       stacked sections and from the tab strip. Other pages using .ce-section keep their card. */
    .competition-tabs-panels .ce-section {
        padding: 12px;
        border: 0;
        border-top: 1px solid var(--border-light);
        border-radius: 0;
        margin-bottom: 0;
    }

    .draw-bracket {
        padding: 12px;
    }

    /* Force fixed column widths so the player name cell can shrink and ellipsis-truncate
       inside a tight viewport. MudTable's default auto layout would otherwise expand to fit
       the longest name and push other columns off-screen. */
    .ct-players-table .mud-table-root {
        table-layout: fixed;
        width: 100%;
    }

    .ct-players-table .ct-th-rank    { width: 44px; }
    .ct-players-table .ct-th-pts     { width: 56px; }
    .ct-players-table .ct-th-actions { width: 44px; }

    .ct-players-table .mud-table-cell {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* ---- Group Stage Matches Dialog ---- */
.gsm-dialog .mud-dialog-title {
    padding: 0;
}

.gsm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--tc-primary) 0%, color-mix(in srgb, var(--tc-primary), black 20%) 100%);
    border-bottom: 3px solid var(--mud-palette-secondary);
}

.gsm-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gsm-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--teal-tint-20);
    color: var(--mud-palette-secondary);
}

.gsm-header__title {
    color: var(--chalk-white) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

.gsm-header__group-name {
    color: var(--mud-palette-secondary) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gsm-header__close {
    color: rgba(245, 245, 240, 0.6) !important;
}

.gsm-header__close:hover {
    color: var(--chalk-white) !important;
    background: rgba(245, 245, 240, 0.1) !important;
}

.gsm-dialog-body {
    padding: 0 !important;
}

.gsm-content {
    padding: 20px 24px;
}

/* ---- Group Stage Matches List ---- */
.gsm-match-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.gsm-match-row {
    display: grid;
    grid-template-columns: 48px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #FAFAF8;
    border: 1px solid var(--border-subtle);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.gsm-match-row:hover {
    background: var(--teal-tint-4);
    border-color: rgba(13, 148, 136, 0.15);
}

.gsm-match-row--completed {
    background: var(--chalk-white);
}

.gsm-match-round {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gsm-round-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border-subtle);
    color: var(--tc-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.gsm-match-row--completed .gsm-round-badge {
    background: var(--teal-tint-10);
    color: var(--mud-palette-secondary);
}

.gsm-match-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.gsm-team {
    flex: 1;
    min-width: 0;
}

.gsm-team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--navy-tint-70);
}

.gsm-team--winner .gsm-team-name {
    font-weight: 600 !important;
    color: var(--tc-primary) !important;
}

.gsm-vs-divider {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.gsm-vs-text {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--navy-tint-30);
    letter-spacing: 0.05em;
}

.gsm-match-result {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 72px;
}

.gsm-score {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--tc-primary);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.gsm-status-chip {
    font-size: 0.6875rem !important;
}

.gsm-match-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .gsm-content {
        padding: 12px;
    }

    .gsm-header {
        padding: 12px 16px;
    }

    .gsm-match-row {
        grid-template-columns: 36px 1fr auto;
        gap: 8px;
        padding: 10px 12px;
    }

    .gsm-match-teams {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .gsm-vs-divider {
        display: none;
    }

    .gsm-match-action {
        grid-column: 3;
        grid-row: 1;
    }

    .gsm-match-result {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 44px;
    }

    .gsm-round-badge {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}
/* ---- Dialog Responsive Content ---- */
.ce-dialog-content {
    overflow-x: auto;
}

@media (max-width: 599px) {
    .ce-dialog-content {
        padding: 12px !important;
    }

    /* Ensure match dialog doesn't overflow on phones */
    .match-dialog-content {
        min-width: unset;
        width: 100%;
    }

    /* Scale player images in match dialog */
    .match-dialog-content .profile-image {
        max-width: 70px;
        max-height: 70px;
    }

    /* New match dialog responsive (duplicated from md-* inline @media for cascade safety) */
    .md-dialog {
        min-width: unset;
        width: 100%;
    }

    /* Touch targets: ensure all buttons inside competition edit are at least 44px */
    .competition-tabs-panels .mud-button-root,
    .ce-nested-tabs-panels .mud-button-root {
        min-height: 44px;
    }

    /* Matches table compact on mobile */
    .ce-matches-table .mud-table-cell,
    .ce-matches-table .mud-table-head .mud-table-cell {
        padding: 8px 6px;
        font-size: 0.8125rem;
        white-space: nowrap;
    }
}

/* Tab panel transition */
.competition-tabs-panels,
.ce-nested-tabs-panels {
    animation: ce-fade-in 0.15s ease-out;
}

@keyframes ce-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Shared Page Headers / Dialogs ---- */
.responsive-page-header {
    gap: 12px;
}

@media (max-width: 959px) {
    .responsive-page-header {
        flex-wrap: wrap;
        align-items: flex-start !important;
    }

    .responsive-page-header .mud-button-root {
        width: 100%;
    }

    .mud-dialog-width-sm,
    .mud-dialog-width-md,
    .mud-dialog-width-lg,
    .mud-dialog-width-xl {
        max-width: calc(100vw - 24px) !important;
    }
}

/* ---- Scheduling Admin List Cards ----
   Wrap-and-indent layout for SessionTypesManagement and SeasonsManagement
   list rows. Mirrors the .ur-row idiom from UserRolesOverview /
   MembersOverview. Desktop: avatar + info + trailing chips/actions sit
   on a single flex row. Mobile (<=599px): the trailing block wraps to a
   new line, indented 56px (40px avatar + 16px gap) so it lines up under
   the content column; the first action icon absorbs whitespace so
   chips read left-to-right and tap targets pin to the right edge. */
.scheduling-admin-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.scheduling-admin-card .sac-info {
    flex: 1;
    min-width: 0;
}

@media (max-width: 599px) {
    .scheduling-admin-card {
        flex-wrap: wrap;
    }

    .scheduling-admin-card .sac-trailing {
        width: 100%;
        margin-left: 56px;
    }

    .scheduling-admin-card .sac-trailing .mud-icon-button {
        margin-left: auto;
    }

    .scheduling-admin-card .sac-trailing .mud-icon-button + .mud-icon-button {
        margin-left: 0;
    }
}



@media (max-width: 599px) {
    .mud-tab.mud-tab-icon-text {
        min-width: 56px;
        padding-left: 12px;
        padding-right: 12px;
        justify-content: center;
        gap: 0;
    }

    .mud-tab.mud-tab-icon-text > :not(.mud-icon-root) {
        display: none !important;
    }
}


@media (min-width: 960px) {
    .h2h-comparison-shell {
        grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.2fr) minmax(180px, 1fr);
        align-items: stretch;
    }

    .h2h-summary-card {
        grid-column: auto;
    }
}

@media (max-width: 599px) {
    .h2h-comparison-shell {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .h2h-summary-card {
        padding: 14px;
    }

    .h2h-player-card {
        padding: 14px 10px;
    }

    
.h2h-player-avatar {
    width: 100px;
    height: 100px;
    font-size: 1.75rem;
    font-weight: 700;
}
.h2h-player-photo {
        width: 76px;
        height: 76px;
    }

    .h2h-wins-row {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .h2h-win-pill {
        min-width: 64px;
        padding: 8px 10px;
    }

    .h2h-stat-row {
        gap: 10px;
    }

    .h2h-p1-value,
    .h2h-p2-value {
        min-width: 64px;
        font-size: 0.875rem;
    }

    .h2h-stat-label {
        font-size: 0.625rem;
    }
}

.matches-toolbar__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.matches-toolbar__subtitle {
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 959px) {
    .mm-card__body {
        grid-template-columns: 1fr;
    }
}

/* ── Notification Menu (bell dropdown) ── */

.nm-root {
    position: relative;
    display: inline-flex;
}

.nm-bell-wrap {
    position: relative;
    display: inline-flex;
}

.nm-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--mud-palette-secondary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--deep-court);
}

.nm-bell-wrap--has-unread .nm-badge {
    animation: nm-pulse 2s ease-in-out infinite;
}

@keyframes nm-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.nm-popover {
    width: 380px;
    max-width: calc(100vw - 32px);
    border-radius: 14px !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 20px 48px rgba(26, 58, 92, 0.12), 0 4px 12px var(--navy-tint-6) !important;
    overflow: hidden !important;
}

.nm-panel {
    display: flex;
    flex-direction: column;
    background: #fff;
}

.nm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.nm-header__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nm-header__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: rgba(13, 148, 136, 0.12);
    color: var(--mud-palette-secondary);
    font-size: 12px;
    font-weight: 700;
}

.nm-body {
    overflow-y: auto;
    max-height: 360px;
}

.nm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.nm-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
}

.nm-item:hover {
    background: var(--navy-tint-3);
}

.nm-item--unread {
    border-left-color: var(--mud-palette-secondary);
    background: var(--teal-tint-4);
}

.nm-item--unread:hover {
    background: rgba(13, 148, 136, 0.07);
}

.nm-item + .nm-item {
    border-top: 1px solid var(--border-subtle);
}

.nm-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--navy-tint-6);
    margin-top: 1px;
}

.nm-item--unread .nm-item__icon {
    background: var(--teal-tint-10);
}

.nm-item__content {
    flex: 1;
    min-width: 0;
}

.nm-item__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--tc-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nm-item__message {
    font-size: 12.5px;
    color: rgba(26, 58, 92, 0.6);
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nm-item__time {
    font-size: 11px;
    color: rgba(26, 58, 92, 0.4);
    margin-top: 4px;
    font-weight: 500;
}

.nm-item__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-secondary);
    margin-top: 6px;
}

.nm-overlay {
    z-index: calc(var(--mud-zindex-popover) - 1) !important;
    background: transparent !important;
}

.nm-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 4px 8px;
}

.nm-footer__btn {
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
}

/* ── Notifications Page ── */

.notifications-page {
    max-width: 920px;
    margin: 0 auto;
}

.notifications-page__loading,
.notification-settings-shell__loading {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

.notifications-page__filters {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notifications-page__time-group {
    font-size: 12px;
    font-weight: 700;
    color: rgba(26, 58, 92, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 20px 0 8px;
}

.notifications-page__time-group:first-child {
    padding-top: 0;
}

.notification-item {
    border: 1px solid var(--border-light);
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(26, 58, 92, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.notification-item--unread {
    border-left: 4px solid var(--mud-palette-secondary);
    background: rgba(13, 148, 136, 0.03);
}

.notification-item__button {
    width: 100%;
    padding: 16px 20px;
    border: none;
    background: transparent;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    font-family: inherit;
}

.notification-item__button:hover {
    background: var(--navy-tint-2);
    border-radius: 14px;
}

.notification-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--navy-tint-6);
}

.notification-item--unread .notification-item__icon {
    background: var(--teal-tint-10);
}

.notification-item__body {
    flex: 1;
    min-width: 0;
}

.notification-item__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.notification-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.notifications-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    text-align: center;
}

.notifications-page__empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* ── Notification Settings ── */

.notification-settings-shell {
    max-width: 720px;
    margin: 0 auto;
}

.notification-settings-card {
    border: 1px solid var(--border-light);
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.96);
}

.notification-settings-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--border-subtle);
}

.notification-settings-option:first-of-type {
    margin-top: 8px;
}

.notification-settings-option__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--navy-tint-6);
    color: var(--tc-primary);
}

.notification-settings-option__text {
    flex: 1;
    min-width: 0;
}

.notification-settings-option__coming-soon {
    font-size: 11px;
    font-weight: 600;
    color: rgba(26, 58, 92, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 599px) {
    .nm-popover {
        width: calc(100vw - 16px);
    }

    .notification-item__button {
        padding: 14px;
    }

    .notification-item__top {
        flex-direction: column;
    }
}

/* ── User Roles page ─────────────────────────────── */
.ur-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ur-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    transition: box-shadow 0.2s, border-color 0.2s, opacity 0.2s;
}

.ur-row:hover {
    border-color: var(--teal-tint-30);
    box-shadow: 0 2px 8px var(--navy-tint-6);
}

.ur-row--saving {
    opacity: 0.6;
    pointer-events: none;
}

.ur-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tc-primary);
    color: var(--chalk-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.ur-info {
    flex: 1;
    min-width: 0;
}

.ur-info .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ur-roles {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.ur-row-skeleton {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Role chip color overrides */
.ur-chip--admin.ur-chip--active { background: var(--tc-primary) !important; color: var(--chalk-white) !important; }
.ur-chip--admin:not(.ur-chip--active) { border-color: var(--tc-primary) !important; color: var(--tc-primary) !important; }

@media (max-width: 599px) {
    .ur-row {
        flex-wrap: wrap;
    }

    .ur-roles {
        width: 100%;
        margin-left: 56px;
    }
}

/* ================================================================
   Members Overview (#301)
   ================================================================ */

.mb-table { display: flex; flex-direction: column; }
.mb-row--revoked { opacity: 0.7; }
.mb-avatar--revoked { background: #9e9e9e !important; }

@media (max-width: 599px) {
    .mb-table .ur-row { flex-wrap: wrap; gap: 8px; }
}

/* ================================================================
   Sidebar Navigation – Sections & Active State (#193)
   ================================================================ */

.mud-drawer .mud-nav-link.active {
    background-color: color-mix(in srgb, var(--mud-palette-secondary) 15%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--mud-palette-secondary) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-secondary) !important;
}

.nav-section-label {
    color: var(--mud-palette-drawer-icon);
    padding: 16px 16px 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.nav-section-divider {
    border-color: color-mix(in srgb, var(--mud-palette-drawer-icon) 15%, transparent);
    margin: 4px 12px;
}

/* ── Tenant Picker ── */
.tp-tenant-card            { transition: box-shadow 0.2s, transform 0.15s; }
.tp-tenant-card:hover      { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }

/* ============================================================
   Scheduling Calendar Grid
   ============================================================ */

.scheduling-calendar {
    display: grid;
    gap: 1px;
    background-color: var(--scheduling-grid-gap);
}

.scheduling-calendar-header {
    background-color: var(--mud-palette-surface);
    padding: 8px 12px;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid var(--scheduling-header-border);
}

.scheduling-time-label {
    background-color: var(--mud-palette-surface);
    padding: 8px 12px;
    font-size: var(--scheduling-time-font);
    font-weight: var(--scheduling-time-weight);
    color: var(--scheduling-time-color);
    text-align: right;
    min-width: 80px;
}

.scheduling-court-name {
    font-weight: 600;
}

.scheduling-surface-icon {
    vertical-align: middle;
    margin-right: 4px;
}

.scheduling-surface-clay  { color: var(--surface-clay); }
.scheduling-surface-hard  { color: var(--surface-hard); }
.scheduling-surface-grass { color: var(--surface-grass); }

.scheduling-slot {
    background-color: var(--scheduling-slot-bg);
    padding: 4px 8px;
    min-height: 48px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.scheduling-slot:hover {
    background-color: var(--scheduling-slot-hover);
}

.scheduling-slot-booked {
    cursor: default;
    color: #fff;
    font-size: 0.8rem;
    border-radius: 8px;
    margin: 2px;
    overflow: hidden;
}

.scheduling-slot-booked:hover {
    filter: brightness(1.05);
}

.scheduling-slot-pending {
    opacity: 0.7;
    border: 2px dashed rgba(255, 255, 255, 0.6);
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 4px, rgba(255,255,255,0.1) 4px, rgba(255,255,255,0.1) 8px
    );
}

.scheduling-recurring-indicator {
    opacity: 0.9;
}

.scheduling-slot-league {
    border: 2px dashed var(--league-slot-color);
    background-color: var(--league-slot-bg);
    cursor: pointer;
    border-radius: 8px;
    margin: 2px;
}

.scheduling-slot-league:hover {
    background-color: var(--league-slot-bg-hover);
}

.scheduling-slot-league-mine {
    border: 2px solid var(--league-slot-mine-border);
    background-color: var(--league-slot-mine-bg);
    cursor: pointer;
    border-radius: 8px;
    margin: 2px;
}

.scheduling-slot-league-claimed {
    border: 2px solid var(--league-slot-color);
    background-color: var(--league-slot-claimed-bg);
    cursor: pointer;
    border-radius: 8px;
    margin: 2px;
}

.scheduling-slot-closed {
    background-color: var(--scheduling-closed-bg);
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 5px, rgba(0,0,0,0.03) 5px, rgba(0,0,0,0.03) 10px
    );
    cursor: not-allowed;
    color: var(--scheduling-closed-color);
    font-size: 0.75rem;
    border-radius: 8px;
    margin: 2px;
    overflow: hidden;
}

.scheduling-slot-past {
    cursor: default;
}

.scheduling-slot-past:hover {
    background-color: var(--scheduling-slot-bg);
}

.scheduling-slot-add-icon {
    opacity: 0;
    transition: opacity 0.15s;
}

.scheduling-slot:hover .scheduling-slot-add-icon {
    opacity: 1;
}

/* Month calendar grid */
.scheduling-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.scheduling-month-header {
    padding: 8px 4px;
    text-align: center;
}

.scheduling-month-cell {
    min-height: 80px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.scheduling-month-cell:hover {
    background-color: var(--scheduling-month-hover);
}

.scheduling-month-cell--other {
    opacity: 0.4;
}

.scheduling-month-cell--today {
    background-color: var(--scheduling-today-bg);
    border-color: var(--scheduling-today-border);
}

.scheduling-month-cell-number {
    margin-bottom: 4px;
}

.scheduling-month-cell-badge {
    margin-top: 4px;
}

/* ── Admin Audit Log ── */
.audit-entry-bordered {
    border-bottom: 1px solid var(--border-subtle);
}

/* ── Closure conflict highlight ── */
.conflict-highlight {
    border: 1px solid var(--mud-palette-error);
    border-radius: 4px;
    padding: 2px;
}

/* ── Competition Schedule cells (MatchScheduleCell) ──
   schedule-cell + match-card: Competition Schedule calendar grid cells.
   MudBlazor has no calendar-cell primitive with the three states we need
   (scheduled match / club-event backdrop / disabled). Colors come from the
   "Court Series" palette (ChalkWhite, CourtNavy, CLUB_EVENT purple). */
.schedule-cell { min-height: 96px; padding: 6px; border: 1px solid transparent; position: relative; transition: background-color 180ms ease, box-shadow 180ms ease; }
.schedule-cell.with-match { border-color: transparent; }
.schedule-cell.club-event { background: var(--navy-tint-4); }
/* Disabled cells stay greyed-out but remain pointer-reactive — mobile tap-to-place
   needs to commit a move or surface a "can't drop here" warning when the user
   taps an empty slot, which is impossible with `pointer-events: none`. */
.schedule-cell.disabled { background: #EEE; opacity: 0.4; }
.schedule-cell.past { opacity: 0.65; }

/* Mobile move-mode / long-press companion: suppresses the inner MatchCard's own
   click so taps route to the cell wrapper. The parent grid then commits the move
   (or shows the invalid-target snackbar). Without this the wrapper's click and
   MatchCard's dialog-open handler both fire and the user lands in the dialog
   while the calendar behind it is in move mode (#454). */
.schedule-cell.suppress-card-clicks .schedule-cell-card,
.schedule-cell.suppress-card-clicks .mc { pointer-events: none; }

/* Availability hint — predictive tint shown on cells in the dragged/hovered match's
   unavailable window. Applies to occupied cells too (swap targets) and to empty cells.
   Reads as "warning" not "blocked": the drop is still allowed (organisers may override
   player preferences). The wash sits on the outer cell, behind the MatchCard, so it
   composes with the spotlight rings/dim already on the card. Uses color-mix on the
   theme's error palette so the warning inherits the active theme (same pattern as
   the secondary-tint hover at line ~4056). */
.schedule-cell.availability-bad {
    background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mud-palette-error) 55%, transparent);
    /* .disabled sets opacity:0.4 which would make the wash invisible on empty cells —
       force full opacity here so the warning is legible regardless of cell state. */
    opacity: 1;
}
.schedule-cell.availability-bad.club-event {
    /* Combine cleanly with the club-event navy backdrop instead of replacing it. */
    background:
        linear-gradient(
            color-mix(in srgb, var(--mud-palette-error) 18%, transparent),
            color-mix(in srgb, var(--mud-palette-error) 18%, transparent)
        ),
        var(--navy-tint-4);
}
.schedule-cell.availability-bad.with-match {
    /* Occupied cells also need the warning to read through the card's own background.
       Slightly stronger wash since the card sits on top and would otherwise dilute it. */
    background: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
}

/* Mobile tap-to-place target — gold wash on cells that are a valid destination
   for the currently-selected match. MudBlazor has no primitive that paints a
   tinted "drop target" indicator on an arbitrary container; this composes with
   the existing .schedule-cell variants the same way .availability-bad does. */
.schedule-cell.mobile-move-target {
    background: color-mix(in srgb, var(--mud-palette-tertiary) 14%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mud-palette-tertiary) 55%, transparent);
    /* .disabled forces opacity to 0.4 — undo so the wash stays legible on
       empty cells that would otherwise be grayed out. */
    opacity: 1;
}

/* schedule-cell-card: wraps MatchCard inside a calendar cell. The round
   marker now lives inside MatchCard's divider (opt-in ShowRound), so the
   wrapper only carries the optional conflict badge as a corner overlay. */
.schedule-cell-card {
    position: relative;
    width: 100%;
    border-radius: 6px;
    transition:
        opacity 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease,
        filter 180ms ease;
}
.schedule-cell-card .mc { width: 100%; min-width: 0; }

/* Hover spotlight — when an organizer hovers a match card on the schedule
   grid, every match that shares a participant gets a teal ring; the rest
   fade back. The hovered match itself wears a navy ring + small lift so the
   "source" reads as distinct from the "siblings". MudBlazor has no primitive
   for this kind of cross-cell relational highlight, hence custom CSS. */
.schedule-cell-card.is-hovered {
    opacity: 1;
    box-shadow:
        0 0 0 2px var(--mud-palette-primary),
        var(--shadow-md);
    transform: translateY(-1px);
    z-index: 2;
}
.schedule-cell-card.is-related {
    opacity: 1;
    box-shadow:
        0 0 0 2px var(--mud-palette-secondary),
        0 4px 12px color-mix(in srgb, var(--mud-palette-secondary) 18%, transparent);
    z-index: 1;
}
.schedule-cell-card.is-dimmed {
    opacity: 0.4;
    filter: saturate(0.7);
}

.schedule-cell-conflict {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 2;
    color: var(--mud-palette-warning);
    display: inline-flex;
    line-height: 1;
    pointer-events: none;
}
.schedule-cell-conflict .mud-icon-root { font-size: 0.875rem; }

.club-event-backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    height: 100%;
    color: var(--mud-palette-primary);
    opacity: 0.35;
}

/* Tighter scoreboard typography inside grid cells — cells are narrow. */
.schedule-cell-card .mc__row { padding: 5px 8px; min-height: 28px; }
.schedule-cell-card .mc__divider { margin: 0 8px; }
.schedule-cell-card .mc__name { font-size: 0.75rem; }
.schedule-cell-card .mc__seed { font-size: 0.625rem; padding: 0 4px; }
.schedule-cell-card .mc__total { font-size: 0.75rem; min-width: 18px; }
.schedule-cell-card .mc__set { font-size: 0.6875rem; min-width: 14px; }
/* Bracket + schedule-grid contexts suppress MatchCard's bottom schedule
   strip — the bracket tree position and the grid axes already convey the
   court/time. */
.schedule-cell-card .mc__schedule,
.draw-match-item .mc__schedule,
.draw-mobile-match-item .mc__schedule,
.draw-third-place-match .mc__schedule { display: none; }

.unscheduled-drop-zone { min-height: 48px; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; }
.unscheduled-drop-zone.mud-drop-zone-over { background: rgba(13, 148, 136, 0.18); outline: 2px dashed var(--mud-palette-secondary); }

/* dnd-*: drag-and-drop feedback for match scheduling grid.
   MudDropContainer applies these via CanDropClass/NoDropClass/DraggingClass.
   Colors source from the "Court Series" palette (AceTeal, CourtNavy). */
.dnd-valid-drop { background: rgba(13, 148, 136, 0.18) !important; outline: 1px dashed var(--mud-palette-secondary); }
.dnd-valid-drop.mud-drop-zone-over { background: rgba(13, 148, 136, 0.35) !important; outline: 2px dashed var(--mud-palette-secondary); }
.dnd-invalid-drop { cursor: not-allowed; }
.dnd-dragging { opacity: 0.6; transform: scale(0.98); transition: transform 80ms ease; }

.schedule-grid-drop-zone { height: 100%; min-height: 84px; }
.unscheduled-chip { display: inline-block; margin: 2px; }

/* ---- MatchCard inline start action ---- */
.mc { position: relative; }
.mc__start-action { position: absolute !important; top: 6px; right: 6px; z-index: 2; box-shadow: var(--shadow-sm); }

/* ---- Competition Completion Bar (persistent across tabs) ---- */
.competition-complete-bar-row { gap: 16px; }
.competition-complete-bar-text { flex: 1 1 320px; min-width: 0; }

/* MudBlazor primitives don't expose viewport-conditional layouts or breakpoint */
/* margin utilities, so xs polish (full-width button, tightened spacing, smaller */
/* bottom margin, calmer title weight) lives in this scoped media query. */
@media (max-width: 600px) {
    .competition-complete-bar { margin-bottom: 0.5rem !important; }
    .competition-complete-bar .mud-alert-message { padding-top: 4px; padding-bottom: 4px; }
    .competition-complete-bar-row { gap: 8px; align-items: stretch; }
    .competition-complete-bar .comp-name-bold { font-size: 1rem; line-height: 1.4; }
    .competition-complete-bar-button { width: 100%; min-height: 44px; }
}

/* ---- Competition Print Results (cpr-*) ---- */
.cpr-root { max-width: 1000px; margin: 0 auto; padding: 16px; }
.cpr-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.cpr-sheet { background: #fff; border: 1px solid var(--border-light); border-radius: 12px; padding: 32px 40px; box-shadow: var(--shadow-sm); }

.cpr-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--mud-palette-primary); margin-bottom: 20px; }
.cpr-header-left { display: flex; flex-direction: column; gap: 4px; }
.cpr-kicker { color: var(--mud-palette-primary); letter-spacing: 0.08em; }
.cpr-title { margin: 0; color: #0F2440; line-height: 1.2; }
.cpr-subtitle { color: #4B5563; }
.cpr-series { color: #6B7280; }
.cpr-header-right { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 18px; justify-content: end; }
.cpr-header-stat { display: flex; flex-direction: column; align-items: flex-end; }
.cpr-stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7280; }
.cpr-stat-value { font-size: 0.95rem; font-weight: 600; color: #1A3A5C; }
.cpr-stat-big { font-size: 1.5rem; font-weight: 700; color: #1A3A5C; }

.cpr-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.cpr-stat-tile { background: var(--navy-tint-3); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }

.cpr-section { margin-top: 24px; page-break-inside: avoid; }
.cpr-section-title { font-size: 1.05rem; font-weight: 700; color: #1A3A5C; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border-light); text-transform: uppercase; letter-spacing: 0.04em; }

.cpr-podium { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; align-items: end; margin-bottom: 16px; }
.cpr-podium-slot { background: var(--navy-tint-3); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.cpr-podium-first { background: rgba(212, 160, 23, 0.1); border-color: rgba(212, 160, 23, 0.4); padding-top: 20px; padding-bottom: 20px; }
.cpr-rank-badge { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
.cpr-rank-gold { background: #D4A017; }
.cpr-rank-silver { background: #9CA3AF; }
.cpr-rank-bronze { background: #D97706; }
.cpr-podium-team { font-weight: 600; color: #0F2440; }
.cpr-podium-label { font-size: 0.75rem; text-transform: uppercase; color: #6B7280; letter-spacing: 0.06em; }
.cpr-podium-points { font-size: 0.8rem; color: #15803D; font-weight: 600; }

.cpr-final { margin-top: 12px; padding: 12px 16px; background: var(--navy-tint-2); border: 1px solid var(--border-subtle); border-radius: 8px; }
.cpr-final-label { font-size: 0.7rem; text-transform: uppercase; color: #6B7280; letter-spacing: 0.08em; margin-bottom: 6px; }
.cpr-final-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.cpr-final-team { color: #1A3A5C; }
.cpr-final-score { font-weight: 700; color: #0F2440; min-width: 100px; text-align: center; }
.cpr-final-winner { font-weight: 700; }

.cpr-group { margin-bottom: 16px; page-break-inside: avoid; }
.cpr-group-name { font-weight: 600; color: #1A3A5C; margin-bottom: 6px; }
.cpr-round { margin-bottom: 14px; page-break-inside: avoid; }
.cpr-round-name { font-weight: 600; color: #1A3A5C; margin-bottom: 6px; letter-spacing: 0.05em; }

.cpr-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cpr-table thead th { text-align: left; padding: 6px 10px; background: var(--navy-tint-4); color: #374151; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-subtle); }
.cpr-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--border-subtle); color: #1F2937; }
.cpr-table tbody tr:last-child td { border-bottom: none; }
.cpr-col-rank { width: 36px; text-align: center; font-weight: 600; color: #6B7280; }
.cpr-col-num { width: 70px; text-align: center; }
.cpr-col-team { text-align: left; }
.cpr-col-strong { font-weight: 700; color: #0F2440; }

.cpr-footer { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--border-subtle); color: #6B7280; font-size: 0.8rem; text-align: right; }

/* Print overrides: hide page chrome, collapse toolbar, fit to paper */
@media print {
    @page { margin: 14mm; }
    body, html { background: #fff !important; }
    .mud-appbar, .mud-drawer, .mud-toolbar, .mud-snackbar-container, .mud-popover { display: none !important; }
    .mud-main-content, .mud-layout { padding: 0 !important; margin: 0 !important; }
    .mud-container { padding: 0 !important; max-width: 100% !important; }
    .cpr-no-print { display: none !important; }
    .cpr-root { max-width: 100%; padding: 0; }
    .cpr-sheet { border: none; padding: 0; box-shadow: none; border-radius: 0; }
    .cpr-section, .cpr-group, .cpr-round, .cpr-podium-slot { page-break-inside: avoid; }
    .cpr-podium-first { background: rgba(212, 160, 23, 0.1) !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* App-bar tenant logo. Lives in global CSS (not MainLayout.razor.css)
   because the class is applied to <img> rendered by MudImage, which
   sits in a different component scope and would not match Blazor's
   scoped-CSS attribute selector. */
.app-bar-logo {
    height: 78px;
    object-fit: contain;
}

/* Clickable wrapper around the tenant logo. The hover feedback is intentionally
   subtle — Court Series is a refined aesthetic, so a soft scale + brightness
   lift signals interactivity without being playful. The :active state pulls
   back slightly for a tactile press feel. */
.app-bar-logo-link {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
    will-change: transform;
}

.app-bar-logo-link:hover {
    transform: scale(1.025);
    filter: brightness(1.08);
}

.app-bar-logo-link:active {
    transform: scale(0.985);
}

.app-bar-logo-link:focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Language picker menu — refined two-column row: native name on the left,
   small letter-spaced ISO code chip on the right. The chip uses a tabular
   monospace stack so EN / SR align perfectly across rows. */
.lang-menu-item {
    min-width: 200px;
}

.lang-menu-item__label {
    flex: 1 1 auto;
}

.lang-menu-item__label--active {
    font-weight: 600;
    color: var(--mud-palette-secondary);
}

.lang-menu-item__code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 2px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    color: var(--mud-palette-text-secondary);
}

/* On narrow viewports (mobile browsers and MAUI native host),
   shrink the tenant logo so right-side app-bar actions
   (LanguagePicker, LoginDisplay) stay reachable.
   Using max-height + max-width with height/width auto preserves
   the intrinsic aspect ratio for any tenant-uploaded logo —
   wide wordmarks are width-bounded, square/tall logos are
   height-bounded, and small icons are not upscaled. */
@media (max-width: 599px) {
    .app-bar-logo {
        height: auto;
        width: auto;
        max-height: 44px;
        max-width: 35vw;
    }
}

/* Consolation eligibility row — highlights the row belonging to
   the current logged-in player. MudBlazor doesn't expose a per-row
   "this is the current user" tint primitive; this uses the AceTeal
   accent token from the Court Series palette. */
.consolation-row-current-player {
    background-color: rgba(13, 148, 136, 0.10);
}