/* ============================================================================
   BRACKETS VIEWER V2 — re-skin for the third-party brackets-viewer.js library
   (Content/brackets-viewer.min.css / Scripts/brackets-viewer.min.js) onto theme-v2.css
   tokens, for use on _LayoutV2 pages. brackets-viewer.js already exposes its full palette as
   CSS custom properties scoped to `.brackets-viewer` (see that file's first rule) - this is a
   re-skin, not a rewrite: every property below is redeclared under a `.brackets-viewer-v2`
   wrapper class (added to the container div), which out-specifies the library's own
   `.brackets-viewer { ... }` rule regardless of stylesheet load order.

   Load AFTER Content/brackets-viewer.min.css. Wrap each bracket container:
   <div class="brackets-viewer-v2"><div class="brackets-viewer" id="..."></div></div>
   ============================================================================ */

.brackets-viewer-v2 .brackets-viewer {
    --primary-background: var(--color-surface);
    --secondary-background: var(--color-surface-secondary);
    --match-background: var(--card-bg);
    --font-color: var(--color-text-primary);
    --win-color: var(--color-success);
    --loss-color: var(--color-danger);
    --label-color: var(--color-text-secondary);
    --hint-color: var(--color-text-secondary);
    --connector-color: var(--color-border-strong);
    --border-color: var(--card-border);
    --border-hover-color: var(--color-primary);
    --border-selected-color: var(--color-primary);
    --text-size: var(--font-size-sm);
    --match-border-radius: var(--radius-sm);
}

/* The library sets a literal white/dark participant-image background inline on some elements;
   these two rules catch the cases token overrides above don't reach. */
.brackets-viewer-v2 .brackets-viewer .participant-name,
.brackets-viewer-v2 .brackets-viewer .name {
    color: var(--color-text-primary);
}
.brackets-viewer-v2 .brackets-viewer .stage-title,
.brackets-viewer-v2 .brackets-viewer .round-title {
    color: var(--color-text-secondary);
    font-weight: 600;
}

/* Team crest, prepended into .name by the library itself (setParticipantImages, called from
   bracket-v2.js) as a bare <img> with no class - the library never styles it. Smaller than the
   34x34 used on the Registered Teams list: a knockout match box is only --match-width (150px)
   wide total, so a small crest here keeps the team name from truncating too aggressively. No
   fallback markup when a team has no logo - the library simply never inserts an <img> for that
   participant, leaving the name-only look unchanged. */
.brackets-viewer-v2 .brackets-viewer .name img {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 6px;
    background: var(--color-surface-secondary);
    border: 1px solid var(--border-color);
}

/* Live match highlight - brackets-viewer.js has no built-in "live" state, so pages that render
   live encounters add this class themselves (see Scripts/tournament/bracket/bracket-v2.js). */
.brackets-viewer-v2 .brackets-viewer .match.bv-live {
    border-color: var(--color-live) !important;
    box-shadow: 0 0 0 1px var(--color-live);
}

/* Same two highlight states as the encounter cards (team-encounter-card-v2.css), for the knockout
   bracket's own match boxes. Winner determined: the library marks the winning `.participant`
   with `.win` (bracket-v2.js passes opponent.result 'win'/'loss') - tint that row and emphasise
   its name. Not decided but live (.bv-live, added by bracket-v2.js): flash the scores (`.result`).
   Not gated on prefers-reduced-motion - status signal, not decoration. */
.brackets-viewer-v2 .brackets-viewer .participant.win {
/*    background: var(--tint-success-bg);
*/    /*box-shadow: inset 3px 0 0 var(--color-success);*/
}
.brackets-viewer-v2 .brackets-viewer .participant.win .name {
    color: var(--tint-success-fg);
    font-weight: 800;
}
.brackets-viewer-v2 .brackets-viewer .participant.loss { opacity: 0.6; }
.brackets-viewer-v2 .brackets-viewer .match.bv-live .participant .result {
    border-radius: var(--radius-sm);
    animation: bv-score-flash 1.4s ease-in-out infinite;
}
@keyframes bv-score-flash {
    0%, 100% { background-color: transparent; color: inherit; box-shadow: 0 0 0 0 transparent; }
    50%      { background-color: var(--tint-danger-bg); color: var(--color-live); box-shadow: 0 0 8px 0 var(--color-live); }
}

.brackets-viewer-v2 {
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
}