/* /static/css/components/feature-radar.css
   ─────────────────────────────────────────
   Radar / spider chart for team vs opponent percentile visualization.
   Dark theme to match the match_details + feature-bars design.
*/

/* ── Slide wrapper ───────────────────────────────────────────────── */
.radar-slide {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          100%;
  box-sizing:     border-box;
  gap:            0;
  overflow-x:     hidden; /* empêche le SVG scalé de déborder hors du viewport */
  /* Prevent accidental horizontal swipe gestures on the radar zone */
  touch-action:   pan-y;
}

/* Block swipe on the SVG zone itself — only vertical scroll allowed */
.radar-svg-outer,
.radar-svg-wrap {
  touch-action: none;
}

/* ── Suppress spurious top border above stat category chips ──────── */
.md-tab-section .tabs-wrap,
.mc-tabs-wrap {
  border-top:  none !important;
  box-shadow:  none !important;
}

/* ── Category carousel (scroll horizontal, pas de wrap) ─────────── */
.radar-carousel {
  display:         flex;
  flex-wrap:       nowrap;
  overflow-x:      auto;
  overflow-y:      hidden;
  scrollbar-width: none;
  width:           100%;
  box-sizing:      border-box;
  -webkit-overflow-scrolling: touch;
  position:        relative;
  z-index:         2;
  /* Même espacement que .md-tabs-wrap (margin-top) + .tabs (padding) dans Statistics */
  margin-top:      0.5rem;
  padding:         0.5rem 0.25rem;
}

.radar-carousel-inner {
  display:         flex;
  flex-wrap:       nowrap;
  gap:             0.4rem;
  width:           max-content;  /* largeur exacte du contenu */
  margin:          0 auto;       /* centrage automatique dans le carousel */
  padding:         0 0.5rem;
  box-sizing:      border-box;
}
.radar-carousel::-webkit-scrollbar { display: none; }

/* Garde aussi .radar-chips pour compat */
.radar-chips {
  display:        flex;
  flex-wrap:      wrap;
  gap:            0.4rem;
  justify-content: center;
  padding:        0 0.5rem;
}

/* ── Shared pill style with .tab-btn (match_details.css) ────────── */
.radar-chip {
  padding:        0.35rem 0.75rem;
  border-radius:  999px;
  border:         1px solid rgba(255, 255, 255, 0.15);
  background:     rgba(255, 255, 255, 0.05);
  color:          rgba(255, 255, 255, 0.55);
  font-size:      0.82rem;
  font-weight:    500;
  letter-spacing: 0.03em;
  cursor:         pointer;
  transition:     background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space:    nowrap;
}

.radar-chip:hover {
  background:   rgba(255, 255, 255, 0.1);
  color:        rgba(255, 255, 255, 0.85);
}

.radar-chip.active {
  background:   rgba(144, 255, 0, 0.12);
  border-color: rgba(144, 255, 0, 0.5);
  color:        rgba(144, 255, 0, 0.9);
  box-shadow:   0 0 8px rgba(144, 255, 0, 0.2);
}

/* ── SVG container ───────────────────────────────────────────────── */
.radar-svg-wrap {
  width:           100%;
  position:        relative;
  overflow:        hidden;
  display:         flex;
  justify-content: center;
  align-items:     center;
  /* height + scale gérés dynamiquement en JS */
}

.radar-svg-full {
  width:     100%;
  max-width: none;
}
/* ── SVG outer — isole le scale pour ne pas affecter carousel/légende ── */
.radar-svg-outer {
  width:    100%;
  overflow: hidden;
  display:  flex;
  justify-content: center;
  align-items:     center;
}

@media (max-width: 640px) {
  .radar-svg-outer {
    overflow: visible;
  }
}

.radar-svg-wrap svg {
  display:          block;
  width:            100%;
  height:           auto;
  overflow:         visible;
  transform:        scale(0.75); /* fallback — écrasé par JS */
  transform-origin: center;
}

@media (max-width: 640px) {
  .radar-svg-wrap {
    overflow: visible;
    /* pas de pointer-events: none — pas de scale qui déborde sur mobile */
  }
  .radar-svg-wrap svg {
    transform: scale(1.55);
  }
}

/* ── Légende avec checkboxes ─────────────────────────────────────── */
.radar-legend-item--check {
  cursor:      pointer;
  user-select: none;
  gap:         0.5rem;
}

.radar-cb {
  appearance:  none;
  -webkit-appearance: none;
  width:       14px;
  height:      14px;
  border:      1.5px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  background:  rgba(255,255,255,0.05);
  cursor:      pointer;
  flex-shrink: 0;
  position:    relative;
  transition:  background 0.15s, border-color 0.15s;
}

.radar-cb:checked {
  background:   rgba(144,255,0,0.25);
  border-color: rgba(144,255,0,0.7);
}

.radar-cb:checked::after {
  content:   '';
  position:  absolute;
  left: 3px; top: 1px;
  width: 5px; height: 8px;
  border:      1.5px solid rgba(144,255,0,0.9);
  border-top:  none;
  border-left: none;
  transform:   rotate(42deg);
}

/* ── Radar polygon transitions ───────────────────────────────────── */
.radar-team,
.radar-opp,
.radar-team-fill,
.radar-opp-fill {
  transition: points 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Legend ──────────────────────────────────────────────────────── */
.radar-legend {
  display:        flex;
  gap:            1.5rem;
  align-items:    center;
  justify-content: center;
  flex-wrap:      wrap;
  padding:        0 1rem;
  position:       relative;
  z-index:        2;
}

.radar-legend-item {
  display:        flex;
  align-items:    center;
  gap:            0.45rem;
  font-size:      0.78rem;
  color:          rgba(255, 255, 255, 0.7);
  font-weight:    500;
  letter-spacing: 0.02em;
}

.radar-legend-dot {
  width:          10px;
  height:         10px;
  border-radius:  50%;
  flex-shrink:    0;
}

.charts-swiper-wrap {
  width:          100%;
}

.charts-swiper-wrap .tabs-wrap {
  margin-bottom:  0.5rem;
}

/* ── Filter bar (window + scope) inside Charts ───────────────────── */
.radar-filters {
  display:        flex;
  gap:            0.75rem;
  justify-content: center;
  align-items:    center;
  margin-bottom:  0.5rem;
  flex-wrap:      wrap;
}

.radar-filters label {
  font-size:      0.72rem;
  color:          rgba(255, 255, 255, 0.5);
  display:        flex;
  align-items:    center;
  gap:            0.35rem;
}

.radar-filters select {
  background:     rgba(255, 255, 255, 0.06);
  border:         1px solid rgba(255, 255, 255, 0.15);
  border-radius:  6px;
  color:          rgba(255, 255, 255, 0.8);
  font-size:      0.72rem;
  padding:        0.2rem 0.5rem;
  cursor:         pointer;
  appearance:     none;
  -webkit-appearance: none;
}

.radar-filters select:focus {
  outline:        none;
  border-color:   rgba(144, 255, 0, 0.4);
}

/* ── Team label headings above pair radars ───────────────────────── */
.radar-pair-labels {
  display:        flex;
  width:          100%;
  max-width:      640px;
  gap:            1rem;
  justify-content: center;
}

.radar-pair-label {
  flex:           1;
  text-align:     center;
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  color:          rgba(255, 255, 255, 0.7);
  padding-bottom: 0.25rem;
}

.radar-pair-label--team {
  color: rgba(144, 255, 0, 0.85);
}

.radar-pair-label--opp {
  color: rgba(255, 182, 193, 0.85);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .radar-svg-wrap {
    max-width: 100%;
  }

  .radar-svg-wrap--pair {
    flex-direction: column;
    max-width:      280px;
  }

  .radar-half {
    width: 100%;
  }

  .radar-chips {
    gap: 0.3rem;
  }

  .radar-chip {
    font-size:  0.65rem;
    padding:    0.2rem 0.6rem;
  }

  .radar-legend {
    gap: 1rem;
  }
}

/* ── Pair layout (comparator) ────────────────────────────────────── */
.radar-pair-row {
  display:   flex;
  gap:       2rem;
  width:     100%;
  max-width: 860px;
  margin:    0 auto;
}

.radar-pair-col {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.75rem;
}

.radar-pair-col .radar-half {
  width: 100%;
}

.radar-legend--sub {
  gap:       0.9rem;
  padding:   0;
  flex-wrap: wrap;
}

.radar-legend--sub .radar-legend-item {
  font-size: 0.72rem;
}

@media (max-width: 600px) {
  .radar-pair-row {
    flex-direction: column;
    gap:            2.5rem;
  }
}

/* ── Section panels (comparator carousel) ────────────────────────── */
.mc-section-panel {
  width: 100%;
}

.mc-section-panel.hidden {
  display: none;
}