/* jQuery Bracket | Copyright (c) Teijo Laine 2011-2018 | Licenced under the MIT licence */

/* ╔══════════════════════════════════════════════════════════════╗
   ║  BRACKET THEME VARIABLES — Synced with frontend theme      ║
   ║  Change these to customize bracket colors                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
:root {
  /* ── Bracket Primary Colors (synced with theme.css) ── */
  --bracket-brand-primary:     var(--brand-primary, #ffe135);
  --bracket-brand-secondary:   var(--brand-secondary, #ffaa00);
  
  /* ── Bracket Backgrounds (synced with theme.css) ── */
  --bracket-bg-base:           var(--bg-base, #0b0c0e);
  --bracket-bg-elevated:       var(--bg-elevated, #1b1d24);
  --bracket-bg-team:           var(--bg-surface, #191b22);
  
  /* ── Bracket Text Colors (synced with theme.css) ── */
  --bracket-text-primary:      var(--text-primary, #f0f2f8);
  --bracket-text-secondary:    var(--text-secondary, #9499b0);
  
  /* ── Status Colors ── */
  --bracket-win-color:         var(--color-open, #00e676);
  --bracket-lose-color:        var(--color-live, #ff3d57);
  --bracket-tie-color:         var(--color-info, #60a5fa);
  --bracket-highlight-color:   var(--bracket-brand-primary, #ffe135);
  --bracket-highlight-loser-color: var(--bracket-bg-team, #191b22);
  --bracket-accent-color:      #10baa8;
  
  /* ── Element Colors ── */
  --bracket-team-bg:           var(--bracket-bg-team, #191b22);
  --bracket-team-border:       rgba(255,255,255,0.1);
  --bracket-connector-line:    rgba(255,255,255,0.25);
  --bracket-tool-bg:           #4a4a4a;
  --bracket-tool-hover-bg:     #666666;
  --bracket-disabled-bg:       #888888;
  --bracket-disabled-text:     #cccccc;
  --bracket-score-bg:          rgba(255,255,255,0.08);
  
  /* ── Derived Colors ── */
  --bracket-third-place-bg:    #8b5a00;
  --bracket-fourth-place-bg:   #5a6b7a;
}

div.bgBracket{
    font-family:var(--font-body, Arial);
    font-size:14px;
    position:relative
}
div.bgBracket .tools{
    position:absolute;
    top:0;
    color:var(--bracket-text-primary)
}
div.bgBracket .tools span{
    cursor:pointer;
    margin:5px;
    display:block;
    text-align:center;
    width:18px;
    height:18px;
    background-color:var(--bracket-tool-bg)
}
div.bgBracket .tools span:hover{
    background-color:var(--bracket-tool-hover-bg)
}
div.bgBracket .finals{
    float:right;
    right:0;
    clear:right;
    position:relative
}
div.bgBracket .bracket{
    float:right;
    clear:left
}
div.bgBracket .loserBracket{
    float:right;
    clear:left;
    position:relative
}
div.bgBracket .round{
    position:relative;
    float:left
}
div.bgBracket .match{
    position:relative
}
div.bgBracket .editable{
    cursor:pointer
}
div.bgBracket .team{
    position:relative;
    z-index:1;
    float:left;
    background-color:var(--bracket-team-bg);
    cursor:default
}
div.bgBracket .team:first-child{
    border-bottom:1px solid var(--bracket-team-border)
}
div.bgBracket .team{
    font-size:14px;
    padding:0;
    width:100%;
    border:0;
    margin:0;
    outline:0
}
div.bgBracket .team div.label{
    padding:3px;
    position:absolute;
    height:22px;
    white-space:nowrap;
    overflow:hidden;
    box-sizing:border-box
}
div.bgBracket .team div.label[disabled]{
    cursor:default
}
div.bgBracket .team div.score{
    float:right;
    padding:3px;
    background-color:var(--bracket-score-bg);
    text-align:center;
    box-sizing:border-box
}
div.bgBracket .team div.score input{
    text-align:center
}
div.bgBracket .team div.score[disabled]{
    color:var(--bracket-text-secondary);
    cursor:default
}
div.bgBracket .team div.label input.error,div.bgBracket .team div.score input.error{
    background-color:#ffcccc
}
div.bgBracket .team.np{
    background-color:var(--bracket-disabled-bg);
    color:var(--bracket-disabled-text)
}
div.bgBracket .team.na{
    background-color:var(--bracket-disabled-bg);
    color:var(--bracket-text-secondary)
}
div.bgBracket .team.win{
    color:var(--bracket-text-primary)
}
div.bgBracket .team.win div.score{
    color:var(--bracket-win-color)
}
div.bgBracket .team.lose div.score{
    color:var(--bracket-lose-color)
}
div.bgBracket .team.lose{
    background-color:var(--bracket-team-bg);
    color:var(--bracket-text-primary)
}
div.bgBracket .team.tie div.score{
    color:var(--bracket-tie-color)
}
div.bgBracket .team.highlightWinner{
    background-color:var(--bracket-highlight-color);
    color:#000
}
div.bgBracket .team.highlightLoser{
    background-color:var(--bracket-highlight-loser-color);
    color:#fff
}
div.bgBracket .team.highlight{
    background-color:var(--bracket-accent-color);
    color:#000
}
div.bgBracket .team.bye{
    background-color:var(--bracket-disabled-bg);
    color:var(--bracket-disabled-text)
}
div.bgBracket .teamContainer{
    z-index:1;
    position:relative;
    float:left
}
div.bgBracket .connector{
    border:2px solid var(--bracket-connector-line);
    border-left-style:none;
    position:absolute;
    z-index:1;
    border-radius: 0px 3px 3px 0px;
}
div.bgBracket .connector div.connector{
    border:0;
    border-bottom:2px solid var(--bracket-connector-line);
    height:0;
    position:absolute
}
div.bgBracket .connector.highlightWinner,div.bgBracket .connector div.connector.highlightWinner{
    border-color:var(--bracket-highlight-color)
}
div.bgBracket .connector.highlightLoser,div.bgBracket .connector div.connector.highlightLoser{
    border-color:var(--bracket-highlight-loser-color)
}
div.bgBracket .connector.highlight,div.bgBracket .connector div.connector.highlight{
    border-color:var(--bracket-win-color)
}
div.bgBracket .np .connector,div.bgBracket .np .connector div.connector{
    border-color:var(--bracket-text-secondary)
}
div.bgBracket .bubble{
    height:22px;
    line-height:22px;
    width:30px;
    right:-35px;
    position:absolute;
    text-align:center;
    font-size:11px
}
div.bgBracket .bubble:after{
    content:"";
    position:absolute;
    top:6px;
    width:0;
    height:0;
    border-top:5px solid transparent;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid transparent
}
div.bgBracket .bubble:after{
    left:-5px;
    border-left:0
}
div.bgBracket .win .bubble{
    background-color:var(--bracket-highlight-color);
    color:#333
}
div.bgBracket .win .bubble:after{
    border-right-color:var(--bracket-highlight-color)
}
div.bgBracket .win .bubble.third{
    background-color:var(--bracket-third-place-bg);
    color:#d95
}
div.bgBracket .win .bubble.third:after{
    border-right:6px solid var(--bracket-third-place-bg)
}
div.bgBracket .lose .bubble{
    background-color:var(--bracket-highlight-color);
    color:#333
}
div.bgBracket .lose .bubble:after{
    border-right-color:var(--bracket-highlight-color)
}
div.bgBracket .lose .bubble.fourth{
    background-color:var(--bracket-fourth-place-bg);
    color:#ccd
}
div.bgBracket .lose .bubble.fourth:after{
    border-right:6px solid var(--bracket-fourth-place-bg)
}
div.bgBracket.rl .finals{
    float:left;
    left:0;
    clear:left
}
div.bgBracket.rl .bracket{
    float:left;
    clear:right
}
div.bgBracket.rl .loserBracket{
    float:left;
    clear:right
}
div.bgBracket.rl .round{
    margin-right:0;
    float:right
}
div.bgBracket.rl .team{
    float:right
}
div.bgBracket.rl .team div.label{
    right:0
}
div.bgBracket.rl .team div.score{
    float:left
}
div.bgBracket.rl .teamContainer{
    float:right
}
div.bgBracket.rl .connector{
    border-left-style:solid;
    border-right-style:none;
    border-width:2px
}
div.bgBracket.rl .connector.highlightWinner,div.bgBracket.rl .connector div.connector.highlightWinner{
    border-color:var(--bracket-highlight-color)
}
div.bgBracket.rl .connector.highlightLoser,div.bgBracket.rl .connector div.connector.highlightLoser{
    border-color:var(--bracket-highlight-loser-color)
}
div.bgBracket.rl .connector.highlight,div.bgBracket.rl .connector div.connector.highlight{
    border-color:var(--bracket-win-color)
}
div.bgBracket.rl .bubble{
    left:-35px
}
div.bgBracket.rl .bubble.third{
    background-color:var(--bracket-third-place-bg);
    color:#310
}
div.bgBracket.rl .bubble.fourth{
    background-color:var(--bracket-fourth-place-bg);
    color:#ccd
}
div.bgBracket.rl .bubble:after{
    left:auto;
    right:-5px;
    border-left:5px solid transparent;
    border-right:0
}
div.bgBracket.rl .bubble.third:after{
    border-right:0;
    border-left:6px solid var(--bracket-third-place-bg)
}
div.bgBracket.rl .bubble.fourth:after{
    border-right:0;
    border-left:6px solid var(--bracket-fourth-place-bg)
}
div.bgBracket.rl .highlightWinner .bubble:after{
    border-left-color:var(--bracket-highlight-color)
}
div.bgBracket.rl .highlightLoser .bubble:after{
    border-left-color:var(--bracket-highlight-loser-color)
}