/* ============================================================================
   TEAM ENCOUNTER CARD V2 — Scripts/tournament/encounter/team-encounter-card.js
   Generic across every tournament format: the number of individual-match rows rendered is
   always individualMatches.length, never a fixed 3/5/7 - see design doc §23/§39. Built on
   .sc-card, token-driven.
   ============================================================================ */

.tec-card { cursor: pointer; }
.tec-card.tec-expanded { cursor: default; }
/* Group-stage grid cards stay clickable (open the full detail popup) even while showing their
   match list inline via the page-level expand/collapse toggle - unlike the click-to-expand
   usage elsewhere (mountTeamEncounterCard), where .tec-expanded means "done, nothing left to
   click". */
.tour-encounter-grid .tec-card.tec-expanded { cursor: pointer; }

.tec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.tec-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--font-size-md);
}
.tec-team-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.tec-team-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background: var(--color-border-strong);
    flex-shrink: 0;
}
.tec-team-row.tec-winner .tec-team-dot { background: var(--color-success); }

/* Team crest, shown instead of the dot once a logo is resolved (teamCrestHtml). Smaller than the
   34x34 used on the Registered Teams list (Content/css/v2/team-registration-v2.css's
   .trm-team-logo) - this row is a compact card, not a table, so a 20px crest keeps the name
   legible next to it. */
.tec-team-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
}
.tec-team-score {
    font-weight: 700;
    font-size: var(--font-size-lg);
    /* Padding/radius are always on (not only while live) so the score box doesn't change size when
       an encounter goes live -> decided, and so the flash below has a visible tinted box to pulse. */
    min-width: 28px;
    padding: 0 6px;
    text-align: center;
    border-radius: var(--radius-sm);
}

/* Winner determined (team-encounter-card.js adds .tec-winner to the winning row and
   .tec-card--decided to the card): highlight the winning team's NAME - success-tinted pill with a
   ring, heavier weight - and dim the losing row so the result reads at a glance. */
.tec-team-row.tec-winner .tec-team-name {
    color: var(--tint-success-fg);
    font-weight: 800;
    background: var(--tint-success-bg);
    box-shadow: inset 0 0 0 1px var(--color-success);
    padding: 2px 10px 2px 8px;
    border-radius: var(--radius-sm);
}
.tec-team-row.tec-winner .tec-team-score { color: var(--tint-success-fg); }
.tec-card--decided .tec-team-row:not(.tec-winner) { opacity: 0.6; }

/* No winner yet but the encounter is in play (.tec-card--live): flash the team SCORES (the LIVE
   badge is kept). Also used on a live individual match's score. ~1.4s cycle = well under the
   3-flashes-per-second photosensitivity limit. Deliberately NOT switched off under
   prefers-reduced-motion: this is a status signal, not decoration (and the dev machines report
   reduced motion, which would hide it). */
.tec-card--live .tec-team-score,
.tec-match-score--live {
    animation: tec-score-flash 1.4s ease-in-out infinite;
}
.tec-match-score--live { padding: 0 6px; border-radius: var(--radius-sm); }
@keyframes tec-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); }
}

.tec-footer {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Encounter-level CourtNo badge (EncounterSummaryContract.courtNo) in .tec-header - distinct from
   .tec-match-court-badge, which is per individual match board. */
.tec-court-no-badge {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
}

.tec-individual-matches {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tec-match-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 4px 0;
    font-size: var(--font-size-sm);
}
/* Court column (courtBadgeHtml) - first thing in the row. A set court is a bordered badge in the
   row's own larger type (var(--font-size-lg)) so it reads at a glance down the whole match list;
   an unset one is just the waiting icon, dashed border, no placeholder text. */
.tec-match-court-badge {
    flex: 0 0 auto;
    min-width: 30px;
    padding: 1px 10px;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.tec-match-court-badge--pending {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-secondary);
    border-style: dashed;
}
.tec-match-name { flex: 1; }
.tec-match-players { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-weight: 400; margin-top: 2px; }
/* "vs" between the two sides' player names (playersLineHtml) - bolded and tinted so the two
   names either side of it read as clearly separate groups, not one run-on line. */
.tec-match-players-vs { color: var(--color-primary); font-weight: 700; margin: 0 4px; text-transform: uppercase; }
/* One side's combined levelPoint exceeds the match slot's configured rating cap
   (playersLineHtml, given a ratingCapForMatch resolver) - flagged in place rather than blocked,
   since this can only happen for a pairing assigned before the cap existed/changed, or via an
   admin override. */
.tec-match-players-overcap { color: var(--color-danger); font-weight: 700; }
.tec-match-score { font-size: var(--font-size-lg); font-weight: 600; white-space: nowrap; }
.tec-match-score--pending { color: var(--color-text-secondary); font-weight: 400; }
/* Referee livestream link (match.referLink) - a play icon ahead of the status text, the only icon
   ever shown here (no status glyph, no live dot otherwise). An <a>, not a <span>, so it's
   keyboard/middle-click friendly like any other link. */
.tec-match-watch { color: var(--color-primary); margin-right: 4px; }
.tec-match-watch:hover { color: var(--color-primary-hover); }

.tec-required-wins {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: right;
}

/* Individual-match row is clickable only in the admin Bracket Management encounter-detail
   popup (options.editable) - see buildIndividualMatchRowHtml in team-encounter-card.js. Never
   set on the public Bracket page's read-only popup. */
.tec-match-row.is-editable { cursor: pointer; border-radius: var(--radius-sm); padding: 4px 6px; margin: 0 -6px; }
.tec-match-row.is-editable:hover { background: var(--color-surface-hover); }
.tec-match-row.is-editable .tec-match-edit-icon { color: var(--color-text-secondary); flex-shrink: 0; font-size: var(--font-size-xs); }
.tec-match-row.is-editable.is-selected { background: var(--tint-primary-bg); }
.tec-match-row.is-editable.is-selected .tec-match-edit-icon { color: var(--color-primary); }

/* ============================================================================
   MATCH POPUPS (Bracket page) — encounter-detail popup + admin match editor.
   Own shell, same structural idiom as .trm-modal (team-registration-v2.css): that stylesheet
   isn't linked on the bracket pages, so this is a local equivalent rather than a cross-feature
   dependency. Toggled via a plain .is-open class (Scripts/tournament/registered-teams-list.js's
   openModal/closeModal idiom), not Bootstrap's .modal().
   ============================================================================ */
.tec-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--modal-overlay-bg);
    -webkit-backdrop-filter: var(--modal-overlay-blur);
    backdrop-filter: var(--modal-overlay-blur);
}
.tec-modal.is-open { display: flex; }
.tec-modal__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 728px; /* 560px + 30%, to fit the match list's Court badge column (tec-match-court-badge) */
    max-height: 86vh;
    background: var(--color-modal-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.tec-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}
.tec-modal__title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
}
.tec-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    cursor: pointer;
}
.tec-modal__close:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }
.tec-modal__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.tec-modal__body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.tec-modal__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
}

/* Match editor (admin only) - appended inline below the match list inside
   #encounterDetailModalBody (BracketManagement.cshtml's #matchEditorSection), not a separate
   modal, so switching to a different match is just another row click, not a close+reopen. */
.mem-inline { margin-top: var(--spacing-md); }
.mem-divider { border: none; border-top: 1px solid var(--color-border); margin: 0 0 var(--spacing-md); }
.mem-editor-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text-primary);
    /* Shared header above the two team columns below it (#memTeam1PlayersField/
       #memTeam2PlayersField, .mem-field-row) - centered so it visually reads as one title over
       both, not aligned to either side. */
    text-align: center;
}
.mem-field { margin-bottom: var(--spacing-md); }
.mem-field label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.mem-field-row { display: flex; gap: var(--spacing-sm); }
.mem-field-row .mem-field { flex: 1; }
.mem-live-buttons { display: flex; gap: var(--spacing-xs); }
.mem-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-xs);
    border-top: 1px solid var(--color-border);
}