/* Bracket container */
.bracket-container {
overflow: auto;
background-color: white;
}

.bracket {
position: relative;
display: inline-block;
padding-top: 20px;
min-width: max-content;
}

/* Hoofdstructuur - vergelijkbaar met Sofascore */
.tournament-tree {
display: flex;
position: relative;
}

/* Kolommen voor elke ronde */
.round-column {
display: flex;
flex-direction: column;
margin-right: 40px;
position: relative;
width: 260px; /* Vaste breedte voor kolommen */
}

.round-title {
text-align: center;
margin-bottom: 20px;
font-weight: bold;
color: #0a3752;
}

/* Container voor wedstrijden met juiste verticale tussenruimte */
.matches-container {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
}

/* Match containers met juiste uitlijning */
.match-pair-container {
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 1;
position: relative;
margin-bottom: 10px;
}

/* Match stijlen */
.match-container {
position: relative;
margin-bottom: 15px;
border-radius: 6px;
border: 1px solid #ccc;
margin-bottom: 4px;
}

.bracket .match {
background-color: white;
overflow: hidden;
border-radius: 6px;
}


/* Match datum boven de wedstrijd */
.match-date {
text-align: center;
font-size: 14px;
background-color: #eee;
border-radius: 4px;
padding: 4px;
margin-bottom: 4px;
color: #0a3752;
}

/* Team stijlen */
.team {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
height: 34px;
}

.team:first-child {
/* border-bottom: 1px solid #eee; */
padding-top: 12px;
padding-bottom: 6px;
}

.team:last-child {
padding-top: 6px;
padding-bottom: 12px;
}


.team-info {
display: flex;
align-items: center;
max-width: 90%;
overflow: hidden;
}

.team-logo {
width: 20px;
height: 20px;
margin-right: 10px;
object-fit: contain;
vertical-align: top;
}

.team-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 15px;
color: #0a3752;
}

.team-name abbr {
    font-weight: bold;
}

.team-score {
font-weight: bold;
font-size: 15px;
white-space: nowrap;
color: #0a3752;
}

/* Connector lijnen - Sofascore stijl */
.connector {
position: absolute;
background-color: #ddd;
z-index: 1;
pointer-events: none;
}

.connector-horizontal {
height: 2px;
}

.connector-vertical {
width: 2px;
}

/* Toernooititel */
.tournament-title {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
color: #0a3752;
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
.round-column {
    width: 202px;
}

.two-legs-container,
.bracket .match {
    width: 200px;
}
}