/*
 * Bracket renderer styles. Everything is namespaced `tb-` and uses no Bootstrap classes, because the
 * same markup is shown in the Bootstrap 4 admin editor and on the Bootstrap 5 public pages.
 */
.tb-root { --tb-border: #d9dee7; --tb-bg: #fff; --tb-muted: #6b7280; --tb-accent: #e86f2c; --tb-win: #0b7a5a; font-family: inherit; color: #1f2937; }
.tb-scroll { overflow: auto; padding: 12px 4px 20px; }
.tb-inner { position: relative; display: inline-block; min-width: 100%; }
.tb-columns { display: flex; gap: 48px; align-items: stretch; position: relative; z-index: 1; }
.tb-round { display: flex; flex-direction: column; min-width: 220px; }
.tb-round-title { text-align: center; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tb-muted); margin-bottom: 8px; }
.tb-round-body { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 14px; }
.tb-svg { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.tb-link { fill: none; stroke: #b6bdc9; stroke-width: 1.5; }
.tb-link-loser { stroke-dasharray: 4 4; stroke: #d6b08f; }

.tb-match { background: var(--tb-bg); border: 1px solid var(--tb-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); overflow: hidden; }
.tb-match.tb-completed { border-color: #b7e3d3; }
.tb-match.tb-locked { background: #fafbfc; }
.tb-match-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #f3f4f8; font-size: 11px; color: var(--tb-muted); }
.tb-match-head .tb-label { font-weight: 700; flex: 1; }
.tb-gear { border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; color: var(--tb-muted); padding: 0 2px; }
.tb-gear:hover { color: var(--tb-accent); }
.tb-clickable { cursor: pointer; }
.tb-clickable:hover { color: var(--tb-accent); }

.tb-row { display: flex; align-items: stretch; border-top: 1px solid var(--tb-border); }
.tb-row:first-of-type { border-top: 0; }
.tb-slot { flex: 1; min-height: 34px; padding: 3px 6px; display: flex; align-items: center; min-width: 0; }
.tb-slot:empty::before { content: 'Chờ đội'; font-size: 12px; color: #a3aab8; font-style: italic; }
.tb-editable .tb-slot:empty::before { content: 'Kéo đội vào đây'; }
.tb-score { min-width: 30px; text-align: center; align-self: center; font-weight: 800; font-size: 15px; }
.tb-win { background: #ecfaf4; }
.tb-win .tb-score, .tb-win .tb-team { color: var(--tb-win); font-weight: 700; }
.tb-draw { text-align: center; font-size: 11px; color: var(--tb-muted); border-top: 1px solid var(--tb-border); }

.tb-team { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px; border-radius: 7px; background: #eef1f7; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-editable .tb-team, .tb-pool-list .tb-team, .tb-group-list .tb-team { cursor: grab; }
.tb-team.tb-hl { outline: 2px solid var(--tb-accent); }
.tb-team.tb-cancelled { background: #fde8e6; color: #b3261e; cursor: default; font-style: italic; }
.tb-pts { font-size: 11px; color: var(--tb-muted); }

.tb-pool-list, .tb-group-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 8px; border: 1px dashed var(--tb-border); border-radius: 10px; background: #fcfcfd; align-content: flex-start; }
.tb-pool-list:empty::before { content: 'Không còn đội nào'; font-size: 12px; color: #a3aab8; }
.tb-group-list:empty::before { content: 'Kéo đội vào bảng'; font-size: 12px; color: #a3aab8; }
.tb-groups { display: flex; flex-wrap: wrap; gap: 14px; }
.tb-group { min-width: 220px; flex: 1; }
.tb-group-title { font-weight: 700; margin-bottom: 6px; }
.tb-note { color: var(--tb-muted); padding: 20px; }
.tb-locked-hint { font-size: 12px; color: var(--tb-muted); }
.sortable-ghost { opacity: .4; }

/* TV mode: bigger everything */
.tb-tv .tb-team { font-size: 20px; padding: 6px 14px; }
.tb-tv .tb-round { min-width: 320px; }
.tb-tv .tb-slot { min-height: 52px; }
.tb-tv .tb-score { font-size: 24px; min-width: 44px; }
.tb-tv .tb-match-head { font-size: 14px; }