/* =====================================================================
   Tournament hub — stage pipeline and the compact match list. The
   context strip, tabs and status pills are the framework's
   detail-hub.css; colours come from the --bo-* tokens.
   ===================================================================== */

/* ---- Stage pipeline ------------------------------------------------- */

.bo-hub-pipeline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.75rem;
}

.bo-hub-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--bo-border);
    color: var(--bo-text-muted);
    background: var(--bo-surface-solid);
    text-decoration: none;
    white-space: nowrap;
}

    .bo-hub-step:hover {
        border-color: var(--bo-border-strong);
        color: var(--bo-text);
    }

.bo-hub-step--done {
    color: var(--bo-hub-ok);
    background: var(--bo-hub-ok-soft);
    border-color: transparent;
}

.bo-hub-step--now {
    color: var(--bo-primary);
    background: var(--bo-primary-soft);
    border-color: transparent;
    font-weight: 500;
}

.bo-hub-step__bar {
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--bo-border-strong);
    overflow: hidden;
}

    .bo-hub-step__bar > span {
        display: block;
        height: 100%;
        background: var(--bo-primary);
    }

.bo-hub-step__count {
    font-variant-numeric: tabular-nums;
}

.bo-hub-pipeline__arrow {
    color: var(--bo-border-strong);
}

.bo-hub-pipeline__end {
    margin-left: auto;
}

/* ---- Mode tabs + sub tabs ------------------------------------------ */

.bo-hub-attention {
    min-width: 300px;
    max-width: 380px;
    padding: 6px 0;
}

.bo-hub-attention__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    font-size: 0.8rem;
    color: var(--bo-text);
}

    .bo-hub-attention__item + .bo-hub-attention__item {
        border-top: 1px solid var(--bo-border);
    }

    .bo-hub-attention__item p {
        margin: 0 0 6px;
        line-height: 1.4;
    }

/* ---- Compact match list ------------------------------------------- */

.bo-hub-matches__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bo-border);
}

.bo-hub-seg {
    display: inline-flex;
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius);
    overflow: hidden;
}

    .bo-hub-seg button {
        padding: 3px 10px;
        border: 0;
        background: transparent;
        color: var(--bo-text-muted);
        font: inherit;
        font-size: 0.78rem;
        cursor: pointer;
        white-space: nowrap;
    }

        .bo-hub-seg button + button {
            border-left: 1px solid var(--bo-border);
        }

        .bo-hub-seg button:hover {
            color: var(--bo-text);
        }

        .bo-hub-seg button[aria-pressed="true"] {
            background: var(--bo-surface-muted);
            color: var(--bo-text);
            font-weight: 500;
        }

        .bo-hub-seg button:focus-visible {
            outline: 2px solid var(--bo-primary);
            outline-offset: -2px;
        }

.bo-hub-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--bo-border);
    background: transparent;
    color: var(--bo-text-muted);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

    .bo-hub-filter-chip[aria-pressed="true"] {
        color: var(--bo-text);
        border-color: var(--bo-text);
        font-weight: 500;
    }

.bo-hub-toolbar__summary {
    font-size: 0.78rem;
    color: var(--bo-text-muted);
}

.bo-hub-toolbar__spacer {
    flex: 1;
}

.bo-hub-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bo-border);
    background: var(--bo-surface-muted);
}

.bo-hub-round {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 0 8px 0 6px;
    border-bottom: 1px solid var(--bo-border);
    background: var(--bo-surface-muted);
}

.bo-hub-round__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 0;
    border-radius: var(--bo-radius);
    background: transparent;
    color: var(--bo-text);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

    .bo-hub-round__toggle:focus-visible {
        outline: 2px solid var(--bo-primary);
        outline-offset: 0;
    }

.bo-hub-round__meta {
    font-weight: 400;
    color: var(--bo-text-muted);
}

.bo-hub-round__chevron {
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bo-hub-round__toggle[aria-expanded="false"] .bo-hub-round__chevron {
    transform: rotate(-90deg);
}

.bo-hub-round__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bo-hub-match-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

    .bo-hub-match-table td {
        height: 38px;
        padding: 0 10px;
        border-bottom: 1px solid var(--bo-border);
        white-space: nowrap;
        color: var(--bo-text);
    }

.bo-hub-match-row {
    cursor: pointer;
}

    .bo-hub-match-row:hover td {
        background: var(--bo-hub-row-hover);
    }

    .bo-hub-match-row.is-drop-target td {
        background: var(--bo-primary-soft);
    }

.bo-hub-cell--drag {
    width: 26px;
    padding: 0 0 0 8px !important;
    color: var(--bo-text-muted);
    cursor: grab;
}

.bo-hub-cell--num,
.bo-hub-cell--lane,
.bo-hub-cell--date {
    color: var(--bo-text-muted) !important;
    font-variant-numeric: tabular-nums;
}

.bo-hub-cell--num {
    width: 34px;
}

.bo-hub-cell--lane {
    width: 72px;
}

.bo-hub-cell--date {
    width: 96px;
}

.bo-hub-cell--team {
    width: 26%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.bo-hub-cell--team-right {
    text-align: left;
}

.bo-hub-cell--score {
    width: 64px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.bo-hub-cell--score-lose {
    color: var(--bo-text-muted) !important;
    font-weight: 500;
}

.bo-hub-cell--vs {
    width: 28px;
    text-align: center;
    color: var(--bo-text-muted) !important;
}

.bo-hub-cell--status {
    width: 120px;
}

.bo-hub-cell--actions {
    position: relative;
    width: 76px;
    text-align: right;
}

.bo-hub-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.bo-hub-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--bo-surface-muted);
    color: var(--bo-text-muted);
}

.bo-hub-status--done {
    background: var(--bo-hub-ok-soft);
    color: var(--bo-hub-ok);
}

.bo-hub-status--live {
    background: var(--bo-hub-live-soft);
    color: var(--bo-hub-live);
}

.bo-hub-status--warn {
    background: var(--bo-hub-warn-soft);
    color: var(--bo-hub-warn);
}

.bo-hub-games-row td {
    padding: 8px 12px 12px;
    background: var(--bo-surface-muted);
    white-space: normal;
}

.bo-hub-stage-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bo-border);
}

@media (max-width: 959.98px) {
    .bo-hub-cell--date,
    .bo-hub-cell--num,
    .bo-hub-cell--drag {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    .bo-hub-round__chevron {
        transition: none;
    }
}