/* Competition type color and shell action refinements.
   Keep this file loaded after the layout and creation-page CSS layers. */

:root {
    --competition-parejas-text: #FACC15;
    --competition-parejas-bg: #EAB30824;
    --competition-copa-text: #ED2121;
    --competition-copa-bg: #8F23233D;
    --competition-liga-text: #10DF34;
    --competition-liga-bg: #1781463D;
    --mustotal-shell-flat-bg: #121417;
}

.mobile-action-btn:not(.mobile-action-btn-primary),
.desktop-action-btn:not(.desktop-action-btn-primary) {
    background: var(--mustotal-shell-flat-bg) !important;
    background-color: var(--mustotal-shell-flat-bg) !important;
    background-image: none !important;
}

.mobile-action-btn-primary,
.desktop-action-btn-primary {
    background: var(--competition-parejas-bg) !important;
    background-color: var(--competition-parejas-bg) !important;
    background-image: none !important;
    border-color: rgba(250, 204, 21, .42) !important;
    color: var(--competition-parejas-text) !important;
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

body:has(.nav.nav-tabs.mb-3.torneo-main-tabs) .mobile-action-btn-primary,
body:has(.nav.nav-tabs.mb-3.torneo-main-tabs) .desktop-action-btn-primary {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

body:has(.nav.nav-tabs.mb-3.torneo-main-tabs) .mobile-action-btn-primary:focus-visible,
body:has(.nav.nav-tabs.mb-3.torneo-main-tabs) .desktop-action-btn-primary:focus-visible {
    box-shadow: none !important;
    outline: 2px solid rgba(0, 162, 232, .42);
    outline-offset: 2px;
}

.mobile-action-btn-primary i,
.desktop-action-btn-primary i {
    color: var(--competition-parejas-text) !important;
    font-weight: 500 !important;
    -webkit-text-stroke: .45px currentColor;
}

.quick-create-modal {
    background: #121212 !important;
    background-color: #121212 !important;
    background-image: none !important;
}

.quick-create-header {
    border-bottom-color: rgba(255, 255, 255, .09) !important;
}

.quick-create-body {
    gap: .7rem !important;
    padding: .9rem !important;
}

.quick-create-option {
    grid-template-columns: 2.65rem minmax(0, 1fr) !important;
    gap: .9rem !important;
    min-height: 64px !important;
    padding: .78rem 1rem !important;
    background: #121212 !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

.quick-create-option i {
    align-items: center;
    border-radius: var(--radius-md);
    display: inline-flex;
    height: 2.65rem;
    justify-content: center;
    margin-left: .05rem;
    width: 2.65rem;
}

.quick-create-option span {
    min-width: 0;
}

.quick-create-option strong {
    color: var(--color-off-white);
    font-size: .98rem;
    line-height: 1.15;
    white-space: normal;
}

.quick-create-option:nth-child(1) {
    background: var(--competition-parejas-bg) !important;
    border-color: rgba(250, 204, 21, .38) !important;
}

.quick-create-option:nth-child(1) i,
.quick-create-option:nth-child(1) strong {
    color: var(--competition-parejas-text) !important;
}

.quick-create-option:nth-child(2) {
    background: var(--competition-liga-bg) !important;
    border-color: rgba(16, 223, 52, .38) !important;
}

.quick-create-option:nth-child(2) i,
.quick-create-option:nth-child(2) strong {
    color: var(--competition-liga-text) !important;
}

.quick-create-option:nth-child(3) {
    background: var(--competition-copa-bg) !important;
    border-color: rgba(237, 33, 33, .38) !important;
}

.quick-create-option:nth-child(3) i,
.quick-create-option:nth-child(3) strong {
    color: var(--competition-copa-text) !important;
}

.competition-selector-option-parejas i {
    color: var(--competition-parejas-text) !important;
}

.competition-selector-option-copa i {
    color: var(--competition-copa-text) !important;
}

.competition-selector-option-liga i {
    color: var(--competition-liga-text) !important;
}

.tournament-segmented-tabs {
    align-items: stretch;
    background: var(--color-deep-graphite);
    border: 1px solid var(--button-border-color);
    border-radius: .9rem;
    display: inline-flex;
    overflow: hidden;
}

.tournament-segmented-tabs .tournament-segmented-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--button-border-color);
    color: var(--color-cool-gray);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .95rem;
    font-weight: 500;
    justify-content: center;
    min-height: 2.25rem;
    padding: .28rem .7rem;
    white-space: nowrap;
}

.tournament-segmented-tabs .tournament-segmented-tab:last-child {
    border-right: 0;
}

.tournament-segmented-tabs .tournament-segmented-tab:hover,
.tournament-segmented-tabs .tournament-segmented-tab:focus-visible {
    background: var(--surface-blue-tint);
    color: var(--color-off-white);
}

.tournament-segmented-tabs .tournament-segmented-tab.active {
    background: rgba(0, 162, 232, .2);
    color: var(--color-off-white);
}

.tournament-segmented-tabs .tournament-segmented-tab.active.tournament-segmented-tab--group-a {
    background: var(--tournament-group-a-active-bg);
    color: var(--color-off-white);
}

.tournament-segmented-tabs .tournament-segmented-tab.active.tournament-segmented-tab--group-b {
    background: var(--tournament-group-b-active-bg);
    color: var(--color-off-white);
}

.tournament-segmented-tabs .tournament-segmented-tab:focus-visible {
    outline: 2px solid rgba(0, 162, 232, .34);
    outline-offset: 2px;
}

.tournament-segmented-tabs .tournament-segmented-tab__icon {
    display: none;
}

.tournament-segmented-tabs .tournament-segmented-tab__label {
    line-height: 1;
}

.tournament-segmented-tabs .tournament-segmented-tab__label--desktop {
    display: inline;
}

.tournament-segmented-tabs .tournament-segmented-tab__label--mobile {
    display: none;
}

.tournament-segmented-tabs .tournament-segmented-tab .tournament-group-round {
    color: var(--color-mustotal-gold);
    font-weight: 500;
}

.mustotal-action-button,
.tournament-action-button {
    align-items: center;
    background: rgba(9, 9, 9, .45);
    border: 1px solid var(--button-border-color);
    border-radius: .75rem;
    color: var(--color-off-white);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .84rem;
    font-weight: 500;
    gap: .35rem;
    justify-content: center;
    min-height: 2.15rem;
    padding: .25rem .68rem;
    white-space: nowrap;
}

.mustotal-action-button:hover,
.mustotal-action-button:focus-visible,
.tournament-action-button:hover,
.tournament-action-button:focus-visible {
    background: var(--surface-blue-tint);
    border-color: rgba(0, 162, 232, .42);
    color: var(--color-off-white);
}

.mustotal-action-button:focus-visible,
.tournament-action-button:focus-visible {
    outline: 2px solid rgba(0, 162, 232, .28);
    outline-offset: 2px;
}

.mustotal-action-button:disabled,
.tournament-action-button:disabled {
    opacity: .56;
}

.mustotal-action-button--brand,
.tournament-action-button--brand {
    border-color: var(--button-border-color);
    color: #8edcff;
}

.mustotal-action-button--brand:hover,
.mustotal-action-button--brand:focus-visible,
.tournament-action-button--brand:hover,
.tournament-action-button--brand:focus-visible {
    background: rgba(0, 162, 232, .14);
    border-color: rgba(0, 162, 232, .72);
    color: #d1f1ff;
}

.tournament-action-button--success {
    border-color: var(--button-border-color);
    color: #9dd8a0;
}

.tournament-action-button--success:hover,
.tournament-action-button--success:focus-visible {
    background: rgba(46, 125, 50, .16);
    border-color: rgba(46, 125, 50, .78);
    color: #bde9bf;
}

.tournament-action-button--warning {
    border-color: var(--button-border-color);
    color: #dfc68d;
}

.tournament-action-button--warning:hover,
.tournament-action-button--warning:focus-visible {
    background: rgba(183, 154, 91, .13);
    border-color: rgba(183, 154, 91, .78);
    color: #f2dfb0;
}

.tournament-action-button--neutral {
    border-color: var(--button-border-color);
    color: var(--color-cool-gray);
}

.tournament-action-button--neutral:hover,
.tournament-action-button--neutral:focus-visible {
    background: rgba(184, 192, 204, .08);
    border-color: rgba(184, 192, 204, .42);
    color: var(--color-off-white);
}

.tournament-action-button--danger {
    border-color: var(--button-border-color);
    color: #ffb6b6;
}

.tournament-action-button--danger:hover,
.tournament-action-button--danger:focus-visible {
    background: rgba(211, 47, 47, .16);
    border-color: rgba(211, 47, 47, .8);
    color: #ffd3d3;
}

.mustotal-action-button i,
.mustotal-action-button .bi,
.tournament-action-button i,
.tournament-action-button .bi {
    display: inline-flex;
    line-height: 1;
}

.mustotal-action-button--edit {
    border-color: var(--button-border-color);
    color: var(--color-sky-blue);
}

.mustotal-action-button--edit:hover,
.mustotal-action-button--edit:focus-visible {
    background: rgba(0, 162, 232, .14);
    border-color: rgba(0, 162, 232, .72);
    color: var(--color-off-white);
}

.mustotal-action-button--save {
    border-color: var(--button-border-color);
    color: var(--color-sky-blue);
}

.mustotal-action-button--save:hover,
.mustotal-action-button--save:focus-visible {
    background: rgba(0, 162, 232, .14);
    border-color: rgba(0, 162, 232, .72);
    color: var(--color-off-white);
}

.mustotal-action-button--icon {
    min-width: 2.15rem;
    padding: .25rem .5rem;
}

.mustotal-action-button--icon i,
.mustotal-action-button--icon .bi {
    margin: 0;
}

@media (max-width: 767.98px) {
    .tournament-segmented-tabs .tournament-segmented-tab {
        font-size: .82rem;
        min-height: 1.95rem;
        padding: .18rem .5rem;
    }

    .tournament-segmented-tabs .tournament-segmented-tab__label--desktop {
        display: none;
    }

    .tournament-segmented-tabs .tournament-segmented-tab__label--mobile {
        display: inline;
    }

    .mustotal-action-button,
    .tournament-action-button {
        font-size: .82rem;
        min-height: 1.95rem;
        padding: .2rem .5rem;
    }

    .mustotal-action-button--icon {
        min-width: 1.95rem;
        padding: .2rem .45rem;
    }

    .quick-create-modal {
        width: min(100%, 360px) !important;
    }

    .quick-create-option {
        grid-template-columns: 2.55rem minmax(0, 1fr) !important;
        gap: .82rem !important;
        padding: .78rem .9rem !important;
    }

    .quick-create-option i {
        height: 2.55rem;
        width: 2.55rem;
    }
}