/* Remove old separate styles */
.FMatchDlg-override-row {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    cursor: default;
}

.FMatchDlg-override-box {
    all: unset;
}

/* ── Left bar instead of top bar ── */
.FMatchDlg-override-wrapper {
    border-radius: 0 10px 10px 0;
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-warning);
    background: var(--mud-palette-background-grey);
}

    /* ── Remove the top bar pseudo element ── */
    .FMatchDlg-override-wrapper::before {
        display: none;
    }

/* ── Thin line between toggle and body ── */
.FMatchDlg-override-body {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.FMatchDlg-override-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mud-palette-warning);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Chips horizontal ── */
.FMatchDlg-override-chips-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding-top: 0;
}


/*=============================================*/

/* Root */
.FMatchDlg-root .mud-dialog {
    border-radius: 16px;
    max-width: 520px !important;
    width: 100% !important;
}

/* =====================================================
       MATCH META
       ===================================================== */
.FMatchDlg-match-meta {
    padding: 8px 12px;
    border-radius: 10px;
}

.FMatchDlg-meta-label {
    font-size: 0.65rem;
    opacity: 0.7;
}

.FMatchDlg-meta-value {
    font-size: 0.75rem;
    font-weight: 500;
}

/* =====================================================
       SCORE HEADER
       ===================================================== */
.FMatchDlg-score-header {
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    color: white;
}

.FMatchDlg-header-outer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 64px;
}

.FMatchDlg-side-nocard {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.FMatchDlg-side-right {
    flex-direction: row-reverse;
}

.FMatchDlg-overlap-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

    .FMatchDlg-overlap-v > *:not(:first-child) {
        margin-top: -5px;
    }

    .FMatchDlg-overlap-v > * {
        outline: 2.5px solid rgba(255,255,255,0.65);
        border-radius: 50%;
    }

.FMatchDlg-center-absolute {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.FMatchDlg-scoreboard {
    display: flex;
    align-items: center;
    gap: 4px;
}

.FMatchDlg-score-digit {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    min-width: 26px;
    text-align: center;
}

.FMatchDlg-score-sep {
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
}

.FMatchDlg-format-chip {
    font-size: 0.6rem !important;
    height: 20px !important;
    opacity: 0.85;
    color: white !important;
    border-color: rgba(255,255,255,0.5) !important;
}

.FMatchDlg-team-card-names {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
    align-self: stretch;
}

.FMatchDlg-team-card-names-right {
    align-items: flex-end;
    text-align: right;
}

.FMatchDlg-team-card-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
       PILL TABS
       ===================================================== */
.FMatchDlg-tabs-pill .mud-tabs-header {
    background: rgba(128,128,128,0.08);
    border-radius: 10px;
    padding: 3px;
}

.FMatchDlg-tabs-pill .mud-tabs-toolbar {
    border-radius: 10px;
    min-height: 34px !important;
}

.FMatchDlg-tabs-pill .mud-tab {
    border-radius: 7px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    min-height: 28px !important;
    min-width: unset !important;
    padding: 0 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 0.55 !important;
    transition: all 0.2s ease !important;
    flex: 1 !important;
}

.FMatchDlg-tabs-pill .mud-tab-active {
    background: var(--mud-palette-primary) !important;
    color: white !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.35) !important;
}

.FMatchDlg-tabs-pill .mud-tab-slider {
    display: none !important;
}

.FMatchDlg-tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.68rem;
    line-height: 1;
}

    .FMatchDlg-tab-item .mud-icon-root {
        font-size: 0.95rem !important;
    }

/* =====================================================
       ADMIN OVERRIDE
       ===================================================== */

.FMatchDlg-override-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.FMatchDlg-override-toggle-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.75; /* was 0.6 */
    color: coral !important; /* always warning color, not inherit */
    padding: 2px 6px;
    border-radius: 4px;
    transition: opacity 0.2s;
    letter-spacing: 0.3px;
}

    .FMatchDlg-override-toggle-btn:hover {
        opacity: 1;
    }


    .FMatchDlg-override-toggle-btn .mud-icon-root {
        font-size: 0.85rem !important;
    }

.FMatchDlg-override-toggle-active {
    opacity: 0.85 !important;
    color: var(--mud-palette-warning) !important;
}

.FMatchDlg-override-wrapper {
    margin-bottom: 10px; /* space after the expanded panel */
}



.FMatchDlg-override-chips-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.FMatchDlg-chip {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    cursor: pointer;
    user-select: none;
    line-height: 1.7;
    transition: all 0.15s ease;
    white-space: nowrap;
}

    .FMatchDlg-chip:hover {
        background: rgba(var(--mud-palette-primary-rgb), 0.1);
    }

.FMatchDlg-chip-active {
    background: var(--mud-palette-primary) !important;
    color: white !important;
}

.FMatchDlg-override-divider {
    height: 1px;
    background: rgba(128,128,128,0.15);
    margin: 0 -2px;
}

.FMatchDlg-override-fields-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.FMatchDlg-override-field-label {
    font-size: 0.62rem;
    opacity: 0.6;
    white-space: nowrap;
    flex-shrink: 0;
}

.FMatchDlg-override-numfield {
    width: 46px;
    flex-shrink: 0;
}

    .FMatchDlg-override-numfield input {
        font-size: 0.68rem !important;
        text-align: center !important;
        padding: 2px !important;
        height: 26px !important;
    }

    .FMatchDlg-override-numfield .mud-input-control {
        margin-bottom: 0 !important;
    }

.FMatchDlg-override-divider-v {
    width: 1px;
    height: 20px;
    background: rgba(128,128,128,0.25);
    flex-shrink: 0;
}

.FMatchDlg-switch-wrap {
    display: flex;
    align-items: center;
    height: 24px;
    margin-top: -1px;
}

    .FMatchDlg-switch-wrap .mud-switch {
        margin: 0 !important;
    }


/* ================================================================
   FINISH MATCH DIALOG — ADD THESE TO YOUR EXISTING CSS FILE
   ================================================================ */

/* Winner dot — appears above avatar on winning side */
.FMatchDlg-winner-circle {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2ecc71;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Outcome label shown instead of score for WO / RET / DSQ */
.FMatchDlg-outcome-label {
    font-size: 1.4rem;
    font-weight: 900;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1;
    margin-bottom: 4px;
}


/* =====================================================
       SCORECARD
       ===================================================== */
.FMatchDlg-scorecard {
    border-radius: 6px;
}

.FMatchDlg-score-row {
    padding: 0 8px;
}

.FMatchDlg-name-spacer {
    flex: 1;
    min-width: 120px;
}

.FMatchDlg-divider {
    margin-bottom: 8px;
}

.FMatchDlg-team-name {
    font-size: 0.75rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.FMatchDlg-team-winner {
    font-weight: 600;
}

.FMatchDlg-team-normal {
    font-weight: 400;
}

.FMatchDlg-score-box {
    border-radius: 4px;
    min-width: 40px;
    max-width: 40px;
}

.FMatchDlg-score-box-winner {
    background: linear-gradient(135deg, var(--mud-palette-success), var(--mud-palette-success-darken));
    color: white;
    border: none;
}

    .FMatchDlg-score-box-winner .mud-input,
    .FMatchDlg-score-box-winner .mud-input-slot,
    .FMatchDlg-score-box-winner input {
        color: white !important;
        font-weight: 700;
    }

.FMatchDlg-score-box-normal {
    background-color: transparent;
}

.FMatchDlg-score-box .mud-input-control .mud-input input,
.FMatchDlg-score-box input {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.FMatchDlg-score-box .mud-input-control {
    margin-bottom: 0 !important;
}

.FMatchDlg-score-input {
    text-align: center !important;
    font-size: 0.85rem;
}

.FMatchDlg-score-input-winner {
    font-weight: 600;
}

.FMatchDlg-score-input-normal {
    font-weight: 500;
}

.FMatchDlg-game-label {
    min-width: 40px;
    font-size: 0.65rem;
    text-align: center;
}

.FMatchDlg-root .mud-input-control .mud-input {
    text-align: center !important;
    font-weight: 600;
}

/* =====================================================
       WINNER ALERT
       ===================================================== */
.FMatchDlg-winner-alert {
    padding: 6px;
}

.FMatchDlg-winner-text {
    font-size: 0.75rem;
}

/* =====================================================
       DROPDOWN LIST ITEMS
       ===================================================== */
.mud-popover .mud-list-item {
    min-height: 30px !important;
    font-size: 0.75rem !important;
}

/* Name column must stay the flex item */
.FMatchDlg-name-cell {
    flex: 1;
    min-width: 120px;
    overflow: hidden;
}

    /* Ensure tooltip wrapper doesn't break flex sizing */
    .FMatchDlg-name-cell .mud-tooltip-root {
        display: block;
        width: 100%;
    }

/* Your existing truncation works with these */
.FMatchDlg-team-name {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================
   CENTER CONTAINER
========================================= */

.FMatchDlg-center-absolute {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
}

/* =========================================
   SCOREBOARD
========================================= */

.FMatchDlg-scoreboard {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.FMatchDlg-score-digit {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    min-width: 24px;
    text-align: center;
}

.FMatchDlg-score-sep {
    font-size: 1.4rem;
    font-weight: 300;
    color: rgba(255,255,255,0.6);
}

/* =========================================
   OUTCOME BADGE – DARK PREMIUM STYLE
========================================= */

.FMatchDlg-outcome-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 18px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    min-width: 85px;
    /* Same visual family as scoreboard */
    background: linear-gradient(135deg, #1e293b, #0f172a);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

    /* WALKOVER – Yellow text */
    .FMatchDlg-outcome-display.wo {
        color: #facc15; /* Premium yellow */
        /*text-shadow: 0 0 6px rgba(250,204,21,0.5);*/
    }

    /* RETIRED / DISQUALIFIED – Red text */
    .FMatchDlg-outcome-display.ret,
    .FMatchDlg-outcome-display.dsq {
        color: #ef4444;
       /* text-shadow: 0 0 6px rgba(239,68,68,0.5);*/
    }

    /* CANCELLED – Muted grey text */
    .FMatchDlg-outcome-display.cancelled {
        color: #94a3b8;
    }