/* 
  Team Recent Form Component Styles
  Defines styling for team recent form boxes and team statistics cards
*/

/* Hide the default disclosure triangle on summary elements */
summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Rotate chevron icon when details is open */
details[open] .details-chevron {
  transform: rotate(180deg);
}

/* Team collapsed row - matching player card dark theme */
.team-collapsed-row {
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-border-2);
}

.team-collapsed-row:hover {
  background: var(--clr-surface-4);
}

/* Ensure proper text colors in team cards */
.team-collapsed-row h3,
.team-collapsed-row h4 {
  color: var(--clr-text-primary);
}

.team-collapsed-row .text-subtle {
  color: var(--clr-text-tertiary);
}

/* Team form sections within collapsed row */
.team-form-section {
  color: var(--clr-text-primary);
}

/* Opponent strength performance styles */
.opponent-strength-results {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  align-items: flex-start;
}

.opponent-strength-results .form-box {
  width: 32px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  padding: var(--space-1);
  font-size: var(--text-xs);
  min-height: 20px;
  text-align: center;
  line-height: 1.2;
}

.opponent-strength-results .form-box div {
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  line-height: 1.2;
}

/* Ensure team statistics tables use left alignment */
.team-statistics-table th {
  text-align: start;
}

.team-statistics-table td {
  text-align: start;
  vertical-align: top;
}

/* Team statistics header styling */
.team-stats-header {
  gap: 0;
}

.team-stats-section {
  width: 100%;
}

/* Performance by Possession Range section styling */
.possession-range-section {
  width: 100%;
}

/* Team statistics tabs styling */
.team-stats-tabs {
  background-color: rgba(0,0,0,0.1);
  padding: var(--space-1);
  gap: 1px;
}

.team-stats-tab-button {
  padding: 4px 12px;
  min-height: auto;
  font-size: 11px;
  min-width: 60px;
}

.team-stats-tab-button:not(:last-child) {
  border-inline-end: 1px solid rgba(0,0,0,0.2);
}

.form-box {
  padding: var(--space-1) var(--space-2);
  text-align: center;
  flex: 1;
  min-width: 48px;
  border: 1px solid;
  transition: transform var(--transition-base);
  cursor: pointer;
}

.form-box:hover {
  transform: scale(1.05);
}

/* Team form result colors using graded intensity based on goal difference */

/* Win colors - light green (1 goal) to bright green (4+ goals) */
.team-form-win.diff-1 {
  background-color: #bbf7d0;
  color: #000000;
  border-color: #86efac;
}

.team-form-win.diff-2 {
  background-color: #86efac;
  color: #000000;
  border-color: #4ade80;
}

.team-form-win.diff-3 {
  background-color: #4ade80;
  color: #000000;
  border-color: #22c55e;
}

.team-form-win.diff-4-plus {
  background-color: #22c55e;
  color: #ffffff;
  border-color: #16a34a;
}

/* Loss colors - light red (1 goal) to bright red (4+ goals) */
.team-form-loss.diff-1 {
  background-color: #fecaca;
  color: #000000;
  border-color: #fca5a5;
}

.team-form-loss.diff-2 {
  background-color: #fca5a5;
  color: #000000;
  border-color: #f87171;
}

.team-form-loss.diff-3 {
  background-color: #f87171;
  color: #000000;
  border-color: #ef4444;
}

.team-form-loss.diff-4-plus {
  background-color: #ef4444;
  color: #ffffff;
  border-color: #dc2626;
}

/* Fallback colors for wins/losses without intensity class */
.team-form-win {
  background-color: #86efac;
  color: #000000;
  border-color: #4ade80;
}

.team-form-loss {
  background-color: #fca5a5;
  color: #000000;
  border-color: #f87171;
}

/* Draw colors - no grading needed since goal difference is always 0 */
.team-form-draw {
  background-color: #a1a1aa;
  color: #000000;
  border-color: #71717a;
}

.team-form-empty {
  background-color: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  opacity: 0.4;
}

/* Common styling for all stat boxes */
[class*="win-rate-"],
[class*="avg-goals-"],
[class*="shots-"]{
  width: 65px !important;
  display: inline-block;
  text-align: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: none !important;
}

[class*="possession-"] {
    display: inline-block;
    text-align: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: none !important;
}

/* Win rate color coding using same pattern as stat boxes */
.win-rate-0-10 {
  background-color: #053e39;
  color: white !important;
}

.win-rate-10-20 {
  background-color: #075751;
  color: white !important;
}

.win-rate-20-30 {
  background-color: #096c63;
  color: white !important;
}

.win-rate-30-40 {
  background-color: #0d9488;
  color: white !important;
}

.win-rate-40-50 {
  background-color: #0d9488;
  color: white !important;
}

.win-rate-50-60 {
  background-color: #09B6A2;
  color: black !important;
}

.win-rate-60-70 {
  background-color: #0AC7B2;
  color: black !important;
}

.win-rate-70-80 {
  background-color: #0DD3BC;
  color: black !important;
}

.win-rate-80-90 {
  background-color: #10DEC6;
  color: black !important;
}

.win-rate-90-100 {
  background-color: #18FFE4;
  color: black !important;
}

/* Average goals color coding - matching stat box font color transitions */
.avg-goals-0-0-3 {
  background-color: #053e39;
  color: white !important;
}

.avg-goals-0-3-0-6 {
  background-color: #075751;
  color: white !important;
}

.avg-goals-0-6-1 {
  background-color: #096c63;
  color: white !important;
}

.avg-goals-1-1-5 {
  background-color: #0d9488;
  color: white !important;
}

.avg-goals-1-5-2 {
  background-color: #09B6A2;
  color: white !important;
}

.avg-goals-2-2-5 {
  background-color: #0AC7B2;
  color: black !important;
}

.avg-goals-2-5-3 {
  background-color: #0DD3BC;
  color: black !important;
}

.avg-goals-3-3-5 {
  background-color: #10DEC6;
  color: black !important;
}

.avg-goals-3-5-4 {
  background-color: #14E5CD;
  color: black !important;
}

.avg-goals-4-plus {
  background-color: #18FFE4;
  color: black !important;
}

/* Result indicators for shot boxes - circular indicator in bottom right */
.shots-w,
.shots-l,
.shots-d {
  position: relative;
}

.shots-w::after,
.shots-l::after,
.shots-d::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.shots-w::after {
  background-color: #16a34a;
}

.shots-l::after {
  background-color: #dc2626;
}

.shots-d::after {
  background-color: #71717a;
}

/* Shots color coding - black to light green (0 to 25+) */
.shots-0 {
  background-color: #053e39;
  color: white !important;
}

.shots-1-3 {
  background-color: #075751;
  color: white !important;
}

.shots-4-6 {
  background-color: #096c63;
  color: white !important;
}

.shots-7-9 {
  background-color: #0d9488;
  color: white !important;
}

.shots-10-12 {
  background-color: #09B6A2;
  color: white !important;
}

.shots-13-15 {
  background-color: #0AC7B2;
  color: black !important;
}

.shots-16-18 {
  background-color: #0DD3BC;
  color: black !important;
}

.shots-19-21 {
  background-color: #10DEC6;
  color: black !important;
}

.shots-22-24 {
  background-color: #14E5CD;
  color: black !important;
}

.shots-25-plus {
  background-color: #18FFE4;
  color: black !important;
}

/* Possession color coding - using project's teal/cyan color scheme (0% to 100%) */
/* Higher specificity to override td.text-center span.font-medium */
.team-statistics-table td.text-center span.possession-0-35,
td.text-center span.possession-0-35,
.possession-0-35 {
  background-color: #053e39 !important;
  color: white !important;
}

td.text-center span.possession-35-40,
.possession-35-40 {
  background-color: #075751 !important;
  color: white !important;
}

td.text-center span.possession-40-45,
.possession-40-45 {
  background-color: #096c63 !important;
  color: white !important;
}

td.text-center span.possession-45-50,
.possession-45-50 {
  background-color: #0d9488 !important;
  color: white !important;
}

td.text-center span.possession-50-55,
.possession-50-55 {
  background-color: #09B6A2 !important;
  color: white !important;
}

td.text-center span.possession-55-60,
.possession-55-60 {
  background-color: #0AC7B2 !important;
  color: black !important;
}

td.text-center span.possession-60-65,
.possession-60-65 {
  background-color: #0DD3BC !important;
  color: black !important;
}

td.text-center span.possession-65-70,
.possession-65-70 {
  background-color: #10DEC6 !important;
  color: black !important;
}

td.text-center span.possession-70-75,
.possession-70-75 {
  background-color: #14E5CD !important;
  color: black !important;
}

td.text-center span.possession-75-80,
.possession-75-80 {
  background-color: #18FFE4 !important;
  color: black !important;
}

td.text-center span.possession-80-99,
.possession-80-99 {
  background-color: #18FFE4 !important;
  color: black !important;
}

td.text-center span.possession-100,
.possession-100 {
  background-color: #18FFE4 !important;
  color: black !important;
}

/* Final overrides to ensure possession colors always win over match-time rule */
/* These must come last to override the match-time rule in _fixtures_list.css */
.team-statistics-table span.possession-0-35,
.team-statistics-table .possession-0-35,
span.possession-0-35 {
  background-color: #053e39 !important;
  color: white !important;
}

.team-statistics-table span.possession-35-40,
.team-statistics-table .possession-35-40,
span.possession-35-40 {
  background-color: #075751 !important;
  color: white !important;
}

.team-statistics-table span.possession-40-45,
.team-statistics-table .possession-40-45,
span.possession-40-45 {
  background-color: #096c63 !important;
  color: white !important;
}

.team-statistics-table span.possession-45-50,
.team-statistics-table .possession-45-50,
span.possession-45-50 {
  background-color: #0d9488 !important;
  color: white !important;
}

.team-statistics-table span.possession-50-55,
.team-statistics-table .possession-50-55,
span.possession-50-55 {
  background-color: #09B6A2 !important;
  color: white !important;
}

.team-statistics-table span.possession-55-60,
.team-statistics-table .possession-55-60,
span.possession-55-60 {
  background-color: #0AC7B2 !important;
  color: black !important;
}

.team-statistics-table span.possession-60-65,
.team-statistics-table .possession-60-65,
span.possession-60-65 {
  background-color: #0DD3BC !important;
  color: black !important;
}

.team-statistics-table span.possession-65-70,
.team-statistics-table .possession-65-70,
span.possession-65-70 {
  background-color: #10DEC6 !important;
  color: black !important;
}

.team-statistics-table span.possession-70-75,
.team-statistics-table .possession-70-75,
span.possession-70-75 {
  background-color: #14E5CD !important;
  color: black !important;
}

.team-statistics-table span.possession-75-80,
.team-statistics-table .possession-75-80,
span.possession-75-80 {
  background-color: #18FFE4 !important;
  color: black !important;
}

.team-statistics-table span.possession-80-99,
.team-statistics-table .possession-80-99,
span.possession-80-99 {
  background-color: #18FFE4 !important;
  color: black !important;
}

.team-statistics-table span.possession-100,
.team-statistics-table .possession-100,
span.possession-100 {
  background-color: #18FFE4 !important;
  color: black !important;
}