/* -------------------- Base -------------------- */
body {
    font-family: Lato;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    padding-bottom: 60px;
}

.boxMatch, .boxLeague, .boxClub, .boxReferee, .boxPlayer, .boxCoach {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex: 1 1 calc(33% - 1rem);
    min-width: 280px;
    display: flex;
    flex-direction: column;
    border: 1px solid #ebebeb;
}

.boxMatch h2, .boxLeague h2, .boxClub h2, .boxReferee h2, .boxPlayer h2, .boxCoach h2 {
    background: #003366;
    color: #fff;
    margin: 0;
    padding: 0.5rem;
    border-radius: 10px 10px 0 0;
    font-size: 1rem;
}

.boxMatch, .boxLeague, .boxPlayer {
  max-height: 690px;
  overflow: hidden;
}

.boxMatch .indexTabContent, .boxLeague .indexTabContent, .boxPlayer .indexTabContent {
  flex: 1;               /* content grows to fill available space */
  overflow-y: auto;      /* vertical scrollbar if too many matches */
  padding-right: 6px;    /* avoids scrollbar overlap with text */
}

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

.tabs {
  display: flex;
  width: 100%; /* Ensures tabs span full width of the box */
}

.tabs button {
  flex: 1 1 auto; /* Each button takes equal space */
  text-align: center;
  padding: 0.5rem;
  border: none;
  background: #ccc;
  cursor: pointer;
  
}


.tabs button:hover,
.tabs button:focus {
  background: #ddd;
  outline: none;
  border-bottom: 0.2em solid #003366;
}

.tabs button.active {
    background: #fff;
    border-bottom: 0.2em solid #003366;
}





/* -------------------- Tab content -------------------- */
.indexTabContent {
    padding: 0.2rem;
    flex: 1;
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

.indexTabContent.active  {
    display: flex;
    opacity: 1;
    transition: opacity 0.5s ease;
}




/* -------------------- Responsive -------------------- */

@media (max-width: 480px) {
  .container {
    flex-direction: column;
    margin-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 1024px) {
    .box { flex: 1 1 calc(50% - 1rem); }
}

@media (max-width: 768px) {
    .box { flex: 1 1 100%; min-width: auto;}
    
    .pBoxTopRow { 
    	flex-direction: column; 
    	align-items: flex-start; 
    }
    
    .pBoxTopNames { 
    	margin-left: 0; 
    	margin-top: 0.5rem; 
    }
    	
    .pBoxTopHeads .pBoxRow.top { margin-left: -20px; margin-bottom: 10px; }
    .pBoxTopHeads { justify-content: flex-start; flex-wrap: wrap; }
}


/* ----------------- Player tables ------------------- */

.metric-container {
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* space between rows */
}

.metric-link {
  text-decoration: none;
  display: flex;
  flex: 1;
  align-items: center;
}

.metric-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  width: 100%;
  gap: 1em;
  border-bottom: 1px solid #ddd;
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-headShot {
	margin-right: 0.5em;
}

.metric-name {
  display: flex;
  flex-direction: column;
}

/* Left: headshot + name */
.metric-left {
    display: flex;
    align-items: center;
	min-width: 150px;
	flex-shrink: 0;
    gap: 0.5em;
}

.metric-left .metric-link {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.metric-name span {
    display: flex;
    flex-direction: column;
}

/* Right: bar + games */
.metric-right {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex: 1; /* take remaining ~60% width */
}

/* Games count */
.statCount {
    white-space: nowrap;
    font-size: 0.85em;
    color: #555;
}