/*-----------------------------------*\
  #track_record_style.css
  Styles for Track Record and Standings pages
  
  NOTE: Table styles here are similar to .data-table in style.css.
  Consider using .data-table as a base class and extending with
  module-specific classes for customization.
  
  Pattern: .data-table .track-record-table (apply both classes)
\*-----------------------------------*/

/* Track record table - extends common .data-table pattern */
.track_record-table{
    border: 1px solid var(--charcoal);
    border-collapse: collapse;
}

.track_record-table th {
    border: 1px solid var(--charcoal);
    padding: 8px;
    text-align: center;
    font-size: medium;
}

.track_record-table td {
    border: 1px solid var(--charcoal);
    padding: 8px;
    text-align: center;
    font-size: small;
}

.age-filter-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.age-filter-group input {
  width: 60px;
  padding: 4px;
  font-size: 0.9em;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.age-unit {
  font-weight: bold;
  font-size: 0.9em;
}

.age-separator {
  margin: 0 4px;
  font-size: 0.9em;
}

.track_record_comments_ul {
    padding-left: 1em; /* Indent nested lists */
    text-align: left;
}
  
.track_record_comments_li {
    list-style: outside disc;
}

/* Mobile comments: show icon, hide full text */
.track_record-comments-icon {
  display: none;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--cinnamon-satin, #c7687f);
  padding: 4px 8px;
  border-radius: var(--radius-4, 4px);
}

.track_record-comments-icon:hover {
  background-color: var(--cadet-blue-crayola_a20, rgba(160, 196, 201, 0.2));
}

/* Mobile: hide full comments, show icon */
@media (max-width: 768px) {
  .track_record-comments-full {
    display: none;
  }
  
  .track_record-comments-icon {
    display: inline-block;
  }
  
  .track_record-comments-cell {
    text-align: center;
  }
}

/* Modal overlay fix for track record page */
.track_record-modal-overlay {
  display: none;
}

.track-record-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
  align-items: center;
}

.track-record-nav a,
.track-record-nav span {
  text-decoration: none;
}

.track_record-table td.coach-cell:hover {
  text-decoration: underline;
  cursor: pointer;
}

.hover-underline:hover {
  text-decoration: underline;
}


/* some styles for schedules and standings */


/* Wrapper for horizontal scroll on small screens */
.schedule-standings-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  max-width: 100%;
}

/* Base table styling */
.schedule-standings-table {
  width: 90vw;
  max-width: 1200px;
  min-width: 600px;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: auto;
}

/* On smaller screens, remove min-width so table wrapper scrolls within viewport */
@media (max-width: 650px) {
  .schedule-standings-table-wrapper {
    width: 100%;
  }
  
  .schedule-standings-table {
    width: 100%;
    min-width: 600px; /* keep table readable, wrapper will scroll */
  }
}


/* First column (team names) fixed width only for standings */
.standings-table th:first-child,
.standings-table td:first-child {
  width: 50%;          /* take half the table width */
  white-space: normal; /* allow wrapping if names are long */
}

/* Remaining columns auto-fit */
.standings-table th:not(:first-child),
.standings-table td:not(:first-child) {
  width: auto;
}


/* Header and cell styling */
.schedule-standings-table th,
.schedule-standings-table td {
  padding: 0.5rem 1rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #ccc;
}

/* Make table headers bold with subtle background */
.schedule-standings-table th {
  font-weight: bold;
  background-color: #f0f0f0;
}


/* Optional: Zebra striping */
.schedule-standings-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.schedule-standings-table tbody tr:last-child td {
  border-bottom: 1px solid #333; /* match your outer border color */
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .schedule-standings-table {
    width: 100%;
    font-size: 0.9rem;
  }

  .schedule-standings-table th,
  .schedule-standings-table td {
    padding: 0.4rem 0.6rem;
  }
}


.division-header {
  width: 90vw;               /* match table width */
  max-width: 1200px;
  min-width: 600px;
  margin: 4rem auto 0 auto;            /* center horizontally */
  background-color: #007BFF; /* blue background */
  color: white;              /* white text */
  font-weight: bold;         /* bold like headers */
  font-size: 2rem;
  text-align: center;        /* center text */
  padding: 0.5rem 1rem;      /* spacing like table cells */
  box-sizing: border-box;    /* consistent sizing */
  border-radius: 4px;        /* optional: rounded corners */
}

/* Fix division header on mobile */
@media (max-width: 650px) {
  .division-header {
    width: 100%;
    min-width: 0;
    font-size: 1.5rem;
  }
}

.bracket-header {
  margin-top: 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

/* Mobile-friendly filter buttons - wrap when needed */
@media (max-width: 650px) {
  .filter-toggle-group {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .filter-toggle-group .filter-toggle-btn {
    border-radius: var(--radius-6);
    border: 1px solid var(--cadet-blue-crayola_a20);
  }
}