/**
 * components.css — 可复用组件样式
 */

/* ── Match Card ── */
.ag-match-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ag-space-3);
  padding: var(--ag-space-3) var(--ag-space-4);
  background: var(--ag-bg-card);
  border-bottom: 1px solid var(--ag-border-light);
  transition: background var(--ag-transition-fast);
  cursor: pointer;
}
.ag-match-card:hover { background: var(--ag-bg-hover); }
.ag-match-card--live { border-left: 3px solid var(--ag-live); background: var(--ag-live-bg); }

.ag-match-card__team {
  display: flex; align-items: center; gap: var(--ag-space-2);
  font-size: var(--ag-font-sm); font-weight: var(--ag-weight-medium);
  color: var(--ag-text-primary);
}
.ag-match-card__team--away { justify-content: flex-end; text-align: right; }
.ag-match-card__team img { width: 24px; height: 24px; object-fit: contain; }

.ag-match-card__score {
  display: flex; align-items: center; gap: var(--ag-space-2);
  font-family: var(--ag-font-mono);
  font-size: var(--ag-font-lg); font-weight: var(--ag-weight-bold);
  min-width: 60px; justify-content: center;
}
.ag-match-card__score--ft { color: var(--ag-text-primary); }
.ag-match-card__score--live { color: var(--ag-live); }
.ag-match-card__score--ns {
  font-size: var(--ag-font-sm); font-weight: var(--ag-weight-medium);
  color: var(--ag-text-secondary); font-family: var(--ag-font-sans);
}

.ag-match-card__status {
  font-size: var(--ag-font-xs); text-align: center;
  margin-top: var(--ag-space-1);
}
.ag-match-card__status--live {
  color: var(--ag-live);
  animation: ag-pulse 1.5s ease-in-out infinite;
}

@keyframes ag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── League Header ── */
.ag-league-header {
  display: flex; align-items: center; gap: var(--ag-space-3);
  padding: var(--ag-space-2) var(--ag-space-4);
  background: var(--ag-bg-tertiary);
  font-size: var(--ag-font-sm); font-weight: var(--ag-weight-semibold);
  color: var(--ag-text-primary);
  cursor: pointer;
  user-select: none;
}
.ag-league-header img { width: 20px; height: 20px; object-fit: contain; }
.ag-league-header__country { color: var(--ag-text-secondary); font-weight: var(--ag-weight-regular); }
.ag-league-header__toggle {
  margin-left: auto;
  color: var(--ag-text-tertiary);
  transition: transform var(--ag-transition-fast);
}
.ag-league-header--collapsed .ag-league-header__toggle { transform: rotate(-90deg); }

/* ── Standings Table ── */
.ag-standings {
  width: 100%;
  font-size: var(--ag-font-sm);
}
.ag-standings th {
  padding: var(--ag-space-2) var(--ag-space-3);
  text-align: left;
  font-weight: var(--ag-weight-semibold);
  color: var(--ag-text-secondary);
  background: var(--ag-bg-tertiary);
  font-size: var(--ag-font-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ag-standings td {
  padding: var(--ag-space-2) var(--ag-space-3);
  border-bottom: 1px solid var(--ag-border-light);
  color: var(--ag-text-primary);
}
.ag-standings tr:hover td { background: var(--ag-bg-hover); }

.ag-standings__team {
  display: flex; align-items: center; gap: var(--ag-space-2);
  font-weight: var(--ag-weight-medium);
}
.ag-standings__team img { width: 20px; height: 20px; object-fit: contain; }

.ag-standings__form { display: flex; gap: 2px; }
.ag-standings__form span {
  width: 16px; height: 16px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--ag-weight-bold); color: #fff;
}
.ag-standings__form span.ag-form--W { background: var(--ag-win); }
.ag-standings__form span.ag-form--D { background: var(--ag-draw); }
.ag-standings__form span.ag-form--L { background: var(--ag-loss); }

/* ── Tabs ── */
.ag-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--ag-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ag-tabs__item {
  padding: var(--ag-space-3) var(--ag-space-4);
  font-size: var(--ag-font-sm); font-weight: var(--ag-weight-medium);
  color: var(--ag-text-secondary);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--ag-transition-fast);
}
.ag-tabs__item:hover { color: var(--ag-text-primary); }
.ag-tabs__item.active {
  color: var(--ag-accent);
  border-bottom-color: var(--ag-accent);
}

.ag-tab-panel { display: none; }
.ag-tab-panel.active { display: block; }

/* ── Card / Section ── */
.ag-card {
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  overflow: hidden;
}
.ag-card__header {
  padding: var(--ag-space-3) var(--ag-space-4);
  font-weight: var(--ag-weight-semibold);
  font-size: var(--ag-font-md);
  border-bottom: 1px solid var(--ag-border-light);
}

.ag-section { margin-bottom: var(--ag-space-6); }
.ag-section__title {
  font-size: var(--ag-font-xl); font-weight: var(--ag-weight-bold);
  margin-bottom: var(--ag-space-4);
}

/* ── Date Nav ── */
.ag-date-nav {
  display: flex; align-items: center; gap: var(--ag-space-1);
  padding: var(--ag-space-3) var(--ag-space-4);
  overflow-x: auto;
}
.ag-date-nav__item {
  padding: var(--ag-space-2) var(--ag-space-3);
  border-radius: var(--ag-radius-md);
  font-size: var(--ag-font-sm);
  color: var(--ag-text-secondary);
  white-space: nowrap;
}
.ag-date-nav__item:hover { background: var(--ag-bg-hover); }
.ag-date-nav__item.active {
  background: var(--ag-accent);
  color: #fff;
}

/* ── Badge ── */
.ag-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: var(--ag-radius-full);
  font-size: var(--ag-font-xs); font-weight: var(--ag-weight-semibold);
}
.ag-badge--live { background: var(--ag-live); color: #fff; }
.ag-badge--ft   { background: var(--ag-bg-tertiary); color: var(--ag-text-secondary); }

/* ── CTA ── */
.ag-cta-btn {
  display: inline-flex; align-items: center; gap: var(--ag-space-2);
  padding: var(--ag-space-2) var(--ag-space-4);
  background: var(--ag-accent);
  color: #fff;
  border-radius: var(--ag-radius-md);
  font-size: var(--ag-font-sm); font-weight: var(--ag-weight-semibold);
  transition: all var(--ag-transition-fast);
}
.ag-cta-btn:hover { background: var(--ag-accent-hover); color: #fff; }
.ag-cta-btn img { height: 20px; width: auto; }

/* ── Live Ticker ── */
.ag-live-ticker {
  background: var(--ag-bg-tertiary);
  padding: var(--ag-space-2) var(--ag-space-4);
  overflow: hidden;
  font-size: var(--ag-font-xs);
}
.ag-live-ticker__inner {
  display: flex; gap: var(--ag-space-8);
  animation: ag-ticker-scroll 30s linear infinite;
}
@keyframes ag-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Toast ── */
.ag-toast {
  position: fixed; bottom: var(--ag-space-6); right: var(--ag-space-6);
  background: var(--ag-bg-card);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  padding: var(--ag-space-3) var(--ag-space-4);
  box-shadow: var(--ag-shadow-lg);
  z-index: var(--ag-z-toast);
  font-size: var(--ag-font-sm);
  transform: translateY(100px);
  opacity: 0;
  transition: all var(--ag-transition-base);
}
.ag-toast.show { transform: translateY(0); opacity: 1; }
.ag-toast--goal { border-left: 3px solid var(--ag-goal); }