/* Shot Charts Tool CSS */

#tool-content {
  text-align: center;
}

h1 {
  margin-top: 0;
}

.d3-tip {
  z-index: 1000;
  font-size: 12px;
  padding: 10px 5px;
}

#selections .selection > ul > li {
  font-size: 1.2em;
}

#selections .selection > ul > li:nth-child(6n + 1) > a[style=""] { background: rgb(27,158,119); }
#selections .selection > ul > li:nth-child(6n + 2) > a[style=""] { background: rgb(217,95,2); }
#selections .selection > ul > li:nth-child(6n + 3) > a[style=""] { background: rgb(117,112,179); }
#selections .selection > ul > li:nth-child(6n + 4) > a[style=""] { background: rgb(231,41,138); }
#selections .selection > ul > li:nth-child(6n + 5) > a[style=""] { background: rgb(102,166,30); }
#selections .selection > ul > li:nth-child(6n + 6) > a[style=""] { background: rgb(230,171,2); }

#selections .selection {
  margin-bottom: 20px;
}

#selections .selection > ul {
  display: grid;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

#selections .selection[data-type="season"] > ul {
  grid-template-columns: repeat(4, 1fr);
}

#selections .selection[data-type="team"] > ul {
  grid-template-columns: repeat(5, 1fr);
}

#selections .selection[data-type="team"] > ul > li > a:not(.selection-reset) {
  aspect-ratio: 1;
  min-height: auto;
}

#selections .selection[data-type="team"]:not([data-value=""]) > ul > li.selected > a:not(.selection-reset) {
  aspect-ratio: auto;
}

#selections .selection[data-type="side"] > ul {
  grid-template-columns: repeat(2, 1fr);
}

#selections .selection[data-type="unit"] > ul {
  grid-template-columns: repeat(3, 1fr);
}

#selections .selection > ul > li {
  position: relative;
}

#selections .selection > ul > li > a:not(.selection-reset) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  min-height: 60px;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
}

#selections .selection > ul > li > a:not(.selection-reset):hover {
  opacity: 0.9;
}

#selections .selection .selection-reset {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  color: white;
  text-decoration: none;
  font-size: 12px;
  padding: 5px;
}

#selections .selection .selection-reset:hover {
  text-decoration: none;
  color: white;
}

#selections .selection:not([data-value=""]) > ul > li:not(.selected) {
  display: none;
}

#selections .selection:not([data-value=""]) > ul {
  grid-template-columns: 1fr;
}

#selections .selection:not([data-value=""]) > ul > li.selected a:not(.selection-reset) {
  width: 100%;
}

#selections .selection:not([data-value=""]) > ul > li.selected .selection-reset {
  display: inline-block;
}

#selection-visualization-container {
  margin: 0 20px;
}

#selection-visualization-counters {
  margin-top: 20px;
}

#selection-visualization-counters > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

#selection-visualization-counters > ul > li a,
#selection-visualization-counters > ul > li a:hover {
  display: block;
  padding: 10px 15px;
  background-color: #F5F5F5;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
}

#selection-visualization-counters > ul > li.active a,
#selection-visualization-counters > ul > li.active a:hover {
  background-color: #E9E9E9;
}

#selection-visualization-counter-charts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

#selection-visualization-counter-charts a,
#selection-visualization-counter-charts a:hover {
  cursor: default;
  background-color: #FFF !important;
}

#selection-visualization-counter-charts [data-counter*="unit"] .shot-chart-title {
  font-size: 10%;
}

/* Shot chart styling */
.shot-chart svg {
  display: block;
  margin: 0 auto;
}

/* Court styling from d3_basketball_shot_chart.scss */
.shot-chart-court * {
  fill: transparent;
  stroke: #333;
  stroke-width: 0.1;
}

.shot-chart-court-ft-circle-bottom {
  stroke-dasharray: 1.5, 1;
}

.shot-chart-court-hoop,
.shot-chart-court-backboard {
  z-index: 100;
}

/* SVG text styling */
.shot-chart-title {
  font-size: 15%;
  text-transform: uppercase;
}

.legend text {
  font-size: 4%;
}

/* Fallback court styling */
.court-outline { fill: none; stroke: #333; stroke-width: 0.1; }
.court-paint { fill: none; stroke: #333; stroke-width: 0.1; }
.court-three-point { fill: none; stroke: #333; stroke-width: 0.1; }
.court-restricted { fill: none; stroke: #333; stroke-width: 0.1; }
.court-free-throw { fill: none; stroke: #333; stroke-width: 0.1; }
.court-backboard { fill: none; stroke: #333; stroke-width: 0.1; }
.court-rim { fill: none; stroke: #333; stroke-width: 0.1; }