/**********************************
   M. Index Page: BOARD STATS
**********************************/

/* --- 1. Base Container (Mobile Default) --- */
.boardstats-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  
  /* Visuals */
  background: rgb(var(--color2light));
  border: var(--border-color);
  box-shadow: var(--box-shadow);
  padding: var(--spacing-medium);
  margin: var(--spacing-medium);
}

/* --- 2. Typography & Headers --- */
.boardstats-section-title {
  font-family: var(--font3);
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: var(--border-dashed);
  padding: var(--spacing-small);
  margin-bottom: var(--spacing-small); /* Added margin for spacing */
  box-shadow: var(--box-shadow);
}

/* --- 3. Content Blocks --- */

/* Recent Threads List */
#recentThreadsContainer {
  max-height: 300px;
  overflow-y: auto;
  /* Transparent background as requested */
  background: transparent; 
}

.newpost-container {
  display: flex;
  align-items: baseline;
  padding: var(--spacing-small);
  border-bottom: 1px dashed rgba(0,0,0,0.1); /* Optional: adds subtle separation */
}

.newpost-title {
  flex: 1; /* Pushes date to the right */
  font-weight: bold;
}

/* Who is Online */
#online-list {
  line-height: 1.5;
  border-bottom: var(--border-dashed); /* Mobile separator */
}

#online-list div {
  padding: var(--spacing-small) 0;
}

/* Most Online */
#most-online {
  font-size: var(--font-size-sm);
  padding: var(--spacing-small) 0;
}

/* --- 4. Stats Bar (Bottom Row) --- */
.stats {
  display: flex;
  justify-content: space-around; /* Spreads items evenly */
  align-items: center;
  
  /* Academy Look */
  border-top: 5px double rgba(var(--color1), 0.3);
  border-bottom: 5px double rgba(var(--color1), 0.3);
  padding: var(--spacing-medium) 0;
  margin-top: var(--spacing-small);
}

/* Reset internal stat borders/margins */
.stat-wrapper, 
.stat-label {
  border: none;
  margin: 0;
  text-align: center;
}

.stat-hero {
  font-size: 1.2em;
  font-weight: bold;
  font-family: var(--font3);
}

/* --- 5. Footer Links --- */
#boardstats-bottom {
  text-align: center;
  font-size: var(--font-size-sm);
  margin-top: auto;
}

#boardstats-inner {
  padding: var(--spacing-medium) 0;
}

/* --- 6. WIDE LAYOUT (Container Query) --- */
@container main-layout (min-width: 768px) {
  
  .boardstats-container {
    display: grid;
    grid-template-columns: 2fr 3fr; 
    gap: var(--spacing-large);
    
    grid-template-areas: 
      'extra online-list'
      'extra most-online'
      'stats stats'
      'bottom-links bottom-links';
  }

  /* Assign Grid Areas ONLY on Desktop */
  .boardstats-extra   { grid-area: extra; }
  #online-list        { grid-area: online-list; margin-bottom: 0; border-bottom: none; }
  #most-online        { grid-area: most-online; }
  .stats              { grid-area: stats; }
  #boardstats-bottom  { grid-area: bottom-links; }

}