padelclub_backend/tournaments/static/tournaments/css/tournament_bracket.css

.round-logo img {
    width: 50px;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    top: -100px; /* Increased negative value to move it higher up */
}

.round-logo img {
    width: 100px; /* Adjust size as needed */
    height: auto;
    display: block;
    margin: 0 auto;
}
.butterfly-match.same-level::before {
    display: none;
}

/* Adjust styling for matches with single parent */
.match-content.disabled {
    visibility: hidden;
}

.incoming-line.disabled,
.outgoing-line.disabled,
.butterfly-match:has(.match-content.disabled)::after,
.butterfly-match:has(.match-content.disabled)::before {
    visibility: hidden;
}

.butterfly-bracket {
    display: flex;
    gap: 40px; /* Increased to account for horizontal lines (20px on each side) */
    position: relative;
    margin-bottom: 80px;
}

.round-title {
    position: absolute;
    top: 0px; /* Adjust this value to position the title where you want it */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center it exactly */
    text-align: center;
    font-weight: bold;
    width: auto; /* Change from 100% to auto */
    padding: 5px 10px;

    white-space: nowrap; /* Prevent text from wrapping */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.round-name {
    color: #707070;
    font-size: 1.5em;
    padding: 8px 12px;
    white-space: nowrap; /* Prevent text wrapping */
    display: block; /* Ensure proper centering */
}

.round-format {
    font-size: 0.9em;
    color: #707070;
    margin-top: -5px; /* Reduced from -10px to bring it closer */
    white-space: nowrap; /* Prevent text wrapping */
    display: block; /* Ensure proper centering */
}

.round-name.button {
    border-radius: 16px;
    width: 100%;
    display: inline-block;
    background-color: #fae7ce;
}

.button:hover {
    color: white;
    background-color: #f39200;
}

.matches-container {
    position: relative;
    width: 100%;
    flex-grow: 1;
}

.butterfly-round {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Space between title and matches */
    position: relative;
    width: var(--match-width);
    flex-shrink: 0;
    margin-top: 100px; /* Add padding to account for absolute positioned title */
}

.butterfly-match {
    position: absolute;
    width: 100%;
    padding: 10px 10px;
}

/* Horizontal line after match */
.outgoing-line {
    content: "";
    position: absolute;
    left: 100%; /* Start from end of match cell */
    top: 50%;
    width: 20px;
    height: 2px;
    background: orange;
}

.butterfly-match::before {
    content: "";
    position: absolute;
    left: calc(0% - 20px);
    width: 2px;
    top: calc(50% - (var(--next-match-distance) / 2));
    height: calc(var(--next-match-distance) + 2px);
    background: pink;
}

/* Vertical line connecting pair of matches */
.butterfly-match.reverse-bracket::before {
    content: "";
    position: absolute;
    left: calc(100% + 20px);
    width: 2px;
    top: calc(50% - (var(--next-match-distance) / 2));
    height: calc(var(--next-match-distance) + 2px);
    background: red;
}

/* Horizontal line to next round match */
.incoming-line {
    position: absolute;
    left: -20px;
    top: 50%;
    width: 20px;
    height: 2px;
    background: blue;
}

/* Horizontal line to next round match */
.butterfly-match .outgoing-line-downward {
    position: absolute;
    right: -20px;
    top: 50%; /* Start from middle of match */
    width: 2px;
    height: var(--semi-final-distance);
    background: black;
}

/* Horizontal line to next round match */
.butterfly-match .outgoing-line-upward {
    position: absolute;
    right: -20px;
    bottom: 50%;
    width: 2px;
    height: var(--semi-final-distance);
    background: black;
}

/* Horizontal line to next round match */
.butterfly-match.reverse-bracket .outgoing-line-downward {
    position: absolute;
    left: -20px;
    top: 50%; /* Start from middle of match */
    width: 2px;
    height: var(--semi-final-distance);
    background: black;
}

/* Horizontal line to next round match */
.butterfly-match.reverse-bracket .outgoing-line-upward {
    position: absolute;
    left: -20px;
    bottom: 50%;
    width: 2px;
    height: var(--semi-final-distance);
    background: black;
}

.butterfly-round:last-child .butterfly-match.reverse-bracket::before,
.butterfly-round:last-child .outgoing-line,
.butterfly-round:first-child .incoming-line {
    display: none;
}

.broadcast-mode .round-name,
.broadcast-mode .round-format {
    padding: 0px;
    color: #707070;
}

.broadcast-mode .round-title {
    padding: 8px 20px; /* Slightly more horizontal padding */
    background-color: white;
    align-content: center;
    border-radius: 24px;
}

.butterfly-match::before,
.butterfly-match.reverse-bracket::before,
.incoming-line,
.outgoing-line,
.outgoing-line-upward,
.outgoing-line-downward {
    background-color: #707070 !important; /* Bright yellow - change to your preferred color */
}

/* Broadcast mode styling for all lines */
.broadcast-mode .butterfly-match::before,
.broadcast-mode .butterfly-match.reverse-bracket::before,
.broadcast-mode .incoming-line,
.broadcast-mode .outgoing-line,
.broadcast-mode .outgoing-line-upward,
.broadcast-mode .outgoing-line-downward {
    background-color: black !important; /* Bright yellow - change to your preferred color */
}

.bubble.match-running {
    position: relative;
}

.bubble.match-running::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px; /* Height of the green indicator */
    background-color: #90ee90; /* Light green color */
    border-radius: 0 0 24px 24px; /* Match the bubble's bottom corners */
}