/**
 * Blitz Tracker — Roster & League Integration Styles
 *
 * League context banner, team logos on panels, roster dropdowns,
 * player dropdown in event modal, end-screen league actions.
 *
 * @depends blitz-timer-events.css
 */

/* ── LEAGUE CONTEXT BANNER ── */

.bt-league-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: linear-gradient(135deg, rgba(201, 173, 106, 0.15), rgba(201, 173, 106, 0.05));
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-md);
}

.bt-league-banner__icon {
  font-size: 1.25rem;
  color: var(--gold-500);
}

.bt-league-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bt-league-banner__text strong {
  color: var(--gold-500);
  font-family: var(--font-display);
  font-size: 1rem;
}

.bt-league-banner__text span {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* ── PANEL LOGOS ── */

.bt-panel__logo {
  text-align: center;
  margin-bottom: var(--space-2);
}

.bt-panel__logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* ── ROSTER LINK DROPDOWNS ── */

.bt-roster-link {
  margin-top: var(--space-2);
}

.bt-roster-link select {
  font-size: 0.85rem;
}

/* ── PLAYER DROPDOWN IN EVENT MODAL ── */

#btEvtPlayerDropdownWrap,
#btEvtTargetDropdownWrap {
  flex: 1;
}

#btEvtPlayerDropdownWrap select,
#btEvtTargetDropdownWrap select {
  font-size: 0.85rem;
}

/* ── END SCREEN LEAGUE ACTIONS ── */

.bt-end__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.bt-end__submit-status {
  text-align: center;
  font-size: 0.9rem;
  padding: var(--space-2) var(--space-3);
}

.bt-success {
  color: var(--green-400, #4ade80);
}

.bt-success i {
  margin-right: var(--space-1);
}

.bt-error {
  color: var(--red-400, #f87171);
}

.bt-error i {
  margin-right: var(--space-1);
}

/* ── RESPONSIVE ── */

@media (max-width: 480px) {
  .bt-panel__logo-img {
    width: 32px;
    height: 32px;
  }
}