/* ========================================
   Analysis Tabs & Sections
   Tab navigation, content panels, badges,
   and utility styles.
   Extracted from _formation_tactics_board.html.erb
   ======================================== */

/* Fade-in animation to prevent FOUC */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Summary Badge ---- */

.summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
}

/* ---- Analysis Tabs ---- */

.analysis-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(var(--glow-rgb), 0.12);
  margin-bottom: 16px;
}

.analysis-tab {
  padding: 10px 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
  background: none;
  border: none;
  font-weight: 500;
}

.analysis-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.analysis-tab--active {
  color: #fff;
  text-shadow: 0 0 8px rgba(var(--glow-rgb), 0.3);
}

.analysis-tab--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--glow);
  box-shadow: 0 0 6px rgba(var(--glow-rgb), 0.4);
}

.analysis-tab-content {
  display: none;
}

.analysis-tab-content--active {
  display: block;
}

/* Prevent tab content height changes from causing page jumps */
.analysis-tabs-container {
  min-height: 600px;
}

/* ---- Utility ---- */

.mini-stat-label {
  font-size: 8px;
  line-height: 1;
  padding-bottom: 5px;
}

/* Mobile: compact tabs */
@media (max-width: 768px) {
  .analysis-tab {
    padding: 8px 12px;
    font-size: 12px;
  }
}