/* ===========================
   Bracket-Specific Variables
   =========================== */
:root {
    /* Connector Colors */
    --connector-color: #666;
    --connector-width: 2px;

    /* Bracket Spacing */
    --match-width: 200px;
    --match-height: auto;
    --match-spacer-height: 30px;
    --round-gap: 50px;
    --participant-height: 30px;
}

/* ===========================
   Bracket Container
   =========================== */
.bracket-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    padding: 20px 0;
}

.bracket-container {
    width: 100%;
    justify-content: center safe;
    display: flex;
    gap: var(--round-gap);
    min-gap: 20px;
    position: relative;
    padding: 20px;
    align-items: flex-start;
}

.bracket-compacter {
    justify-content: flex-start;
    display: flex;
    gap: var(--round-gap);
    min-gap: 20px;
    min-height: 300px;
    position: relative;
    padding: 0px 50px;
    align-items: stretch;
    z-index: 1;
}

.bracket-compacter:first-child.round-column {
    align-self: flex-start;
}

/* ===========================
   Round Column
   =========================== */
.round-column {
    display: flex;
    flex-direction: column;
    min-width: var(--match-width);
}

.round-header {
    font-size: var(--font-size-large);
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    padding: 10px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    color: var(--text-primary);
}

.matches-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    gap: var(--match-margin);
}

/* ===========================
   Match Box
   =========================== */
.match {
    background-color: var(--bg-match);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    min-width: var(--match-width);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Match Spacer (for hidden bye matches) */
.match-spacer {
    min-height: var(--match-spacer-height);
    min-width: var(--match-width);
    visibility: hidden;
}

.match:hover {
    background-color: var(--bg-match-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.match.highlighted {
    border-color: var(--color-highlight);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    animation: fadeHighlight 3s ease forwards;
}

@keyframes fadeHighlight {
  0%   {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    border-color: var(--color-highlight);
  }
  100% {
    box-shadow: 0 0 20px transparent;
    border-color: var(--border-color);
   }
}

/* Match Types */
.match-bye {
    border-left: 4px solid var(--color-bye);
}

.match-stub {
    border-left: 4px solid var(--text-muted);
}

.match-team_match {
    border-left: 4px solid var(--color-finished);
}

/* Match Status */
.match-status-finished {
    border-left-color: var(--color-finished);
}

.match-status-not_scheduled {
    border-left-color: var(--color-not-scheduled);
    opacity: 0.8;
}

.match-status-before {
    border-left-color: var(--color-before);
}

.match-status-in_progress {
    border-left-color: var(--color-in-progress);
    animation: pulse 3s ease-in-out infinite;
}

/* ===========================
   Match Header
   =========================== */
.match-header {
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-small);
    font-weight: bold;
    text-align: center;
    color: var(--text-secondary);
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
}

/* ===========================
   Participants
   =========================== */
.participants {
    display: flex;
    flex-direction: column;
}

.participant {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    min-height: var(--participant-height);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.participant:last-child {
    border-bottom: none;
}

.participant:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.participant.winner {
    background-color: rgba(76, 175, 80, 0.15);
    font-weight: bold;
    color: var(--color-winner);
}

.participant.winner .participant-name {
    color: var(--color-winner);
}

.participant-name {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    margin-right: 12px;
}

.participant-name.match-reference {
    color: var(--text-reference);
    font-style: italic;
    cursor: pointer;
    text-decoration: underline;
}

.participant-name.match-reference:hover {
    color: var(--color-secondary);
}

/* Participant Scores Container */
.participant-scores {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

/* Individual Single Match Score */
.single-match-score {
    min-width: 28px;
    padding: 2px 6px;
    text-align: center;
    font-weight: normal;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    border-radius: var(--border-radius-small);
    background-color: rgba(0, 0, 0, 0.2);
}

/* Winning Score Highlight */
.single-match-score.winning-score {
    background-color: var(--color-winner);
    color: white;
    font-weight: bold;
}

/* Legacy support for old participant-score class */
.participant-score {
    min-width: 30px;
    text-align: center;
    font-weight: bold;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.participant.winner .participant-score {
    color: var(--color-winner);
}

/* ===========================
   Bye Label
   =========================== */
.bye-label {
    padding: 8px 15px;
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

/* ===========================
   Match Info
   =========================== */
.match-info {
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

.match-time {
    color: var(--text-secondary);
}

.match-status-label {
    padding: 2px 8px;
    border-radius: var(--border-radius-small);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.match-status-finished .match-status-label {
    background-color: var(--color-finished);
    color: white;
}

.match-status-not_scheduled .match-status-label {
    background-color: var(--color-not-scheduled);
    color: white;
}

.match-status-before .match-status-label {
    background-color: var(--color-before);
    color: white;
}

.match-status-in_progress .match-status-label {
    background-color: var(--color-in-progress);
    color: white;
}

/* ===========================
   Connector Lines (SVG)
   =========================== */
.bracket-connectors {
    z-index: 0;
    pointer-events: none;
}

.connector-line {
    fill: none;
    stroke: var(--connector-color);
    stroke-width: var(--connector-width);
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 768px) {
    :root {
        --match-width: 180px;
        --round-gap: 80px;
    }
}

@media (max-width: 480px) {
    :root {
        --match-width: 160px;
        --round-gap: 60px;
        --participant-height: 35px;
    }
}

/* ===========================
   Scrollbar Styling for Bracket Wrapper
   =========================== */
.bracket-wrapper::-webkit-scrollbar {
    height: 12px;
}

.bracket-wrapper::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
}

.bracket-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--border-radius);
}

.bracket-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}