/*-----------------------------------*\
  #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 */


/* ---------------------------------------------------------------------------
   The region the filter bar swaps in place (partial/filter_form.html).

   The old games stay on screen and legible while the new ones are fetched, which
   is what a page reload could never do. The dim is only there to say "this is
   the previous answer" if the wait is long enough to notice — hence the delay:
   the fade only STARTS after 120ms, so a fast response (nearly all of them) swaps
   with no visual effect whatsoever, and a slow one dims rather than sitting there
   looking finished. Removing the class fades back immediately, with no delay.
   --------------------------------------------------------------------------- */
#filter-results {
  transition: opacity 120ms ease;
}

#filter-results.is-loading {
  opacity: 0.45;
  transition-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  #filter-results,
  #filter-results.is-loading {
    transition: none;
  }
}


/* 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;
}

/* Team-name cells are the one place where content is unbounded: the display name is
   "<club> <team>", which for some clubs runs 60+ characters. With the blanket
   `white-space: nowrap` above, those cells forced the table past its 1200px max-width,
   so each division's table ended up a different width and the long ones grew a
   horizontal scrollbar that the (fixed-width) .division-header banner didn't share.
   Letting only these cells wrap keeps every table at a uniform 1200px. */
.schedule-standings-table th.team-cell,
.schedule-standings-table td.team-cell {
  white-space: normal;
  overflow-wrap: break-word; /* last resort for a single unbroken 40-char club name */
}

/* The team link is a flex row (logo + name). Its default .inline-container bottom margin
   pushed team rows taller than plain-text rows; drop it inside the table and let the
   flex gap own the logo-to-text spacing now that the name may span two lines. */
.schedule-standings-table td.team-cell .inline-container {
  margin-bottom: 0;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   The team row -- a crest and a name, on all three public tabs.

   ONE definition for what was three: 32px inline on the schedule, 32px inline on
   the standings, 24px in brackets.css. Three copies meant the divisions tab was
   quietly rendering smaller crests than the schedule tab of the same page, and
   no single edit could correct any of it.

   The two knobs are variables because this is the size that gets argued about.
   Both were scaled up deliberately: a crest is the fastest way a parent finds
   their own team in a list, and at 24-32px next to 16px text it was doing none
   of that work. 1rem = 10px here (style.css).
   --------------------------------------------------------------------------- */
:root {
  --team-row-logo-size: 4.8rem;
  --team-row-font-size: 2.4rem;
}

/* A FIXED box, not max-width/max-height on an auto-sized image.

   An <img> with `width: auto` occupies zero width until its own bytes arrive, so
   each crest, landing separately, pushed its row taller and shoved its team name
   sideways: a whole table of small independent jumps on every paint, which is
   most of what made changing a filter feel jerky. Reserving the box means a row
   is its final size before the first logo byte, and the names line up in a
   column while they load.

   `scale-down` rather than `contain` keeps exactly what max-width/max-height
   used to draw: a crest smaller than the box stays at its own size instead of
   being blown up to a blurry 48px. */
.team-logo {
  width: var(--team-row-logo-size);
  height: var(--team-row-logo-size);
  object-fit: scale-down;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-block;
  margin-right: 0.8rem;
}

.schedule-standings-table td.team-cell {
  font-size: var(--team-row-font-size);
}

/* Make table headers bold with subtle background.

   The tint follows the event's theme rather than staying a fixed grey, so a
   themed page reads as one palette instead of "their colour, then our grey".
   22% of the accent over white keeps it a background — enough to tell you the
   page has a colour, not enough to compete with the division banner above it.

   Two declarations, not one: the plain grey is the fallback a browser without
   color-mix() keeps (it simply ignores the second line), which is the old
   appearance rather than a broken one. */
.schedule-standings-table th {
  font-weight: bold;
  background-color: #f0f0f0;
  background-color: color-mix(in srgb, var(--ev-accent, #f0f0f0) 22%, white);
}


/* 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 */
  /* The event's theme, if it has one. The fallbacks are the scheme every event
     rendered in before themes existed, so an unthemed page is byte-identical to
     what it was. Both halves come from the theme together -- see
     event/templates/partial/event_theme.html: a light accent like Unashamed
     Ballers' gold needs dark ink, and a surface colour cannot say that about
     itself. */
  background-color: var(--ev-accent, #007BFF);
  color: var(--ev-on-accent, #FFFFFF);
  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);
  }
}

/* ---------------------------------------------------------------------------
   Event title block -- the host's own logo above the event name.

   Rendered by event/templates/partial/event_title.html on the schedule and
   standings tabs, and by the identical markup in BracketsApp.tsx on the
   divisions tab. The three are one page with three tabs, so the heading must
   look and measure the same on all of them: edit here and it moves everywhere.

   The logo sits ABOVE the name and is the page's masthead -- there is no
   Universal Scheduling bar above it on these three pages any more, deliberately.

   HEIGHT is the constraint that matters, not width, and that is the whole point
   of the rule below. This used to size the logo by width alone (90vw capped at
   960) with the height left to the image's own ratio, which is only safe for a
   wide wordmark: a SQUARE crest -- which is what most clubs upload -- came out
   960px tall and filled an entire laptop screen, so a parent opening the
   schedule saw a crest and had to scroll to reach a single fixture. Capping the
   height and letting the width follow from the ratio handles both shapes with
   one rule: a wordmark stays wide and short (the max-width still bites first),
   a crest lands at ~280px tall, and neither is ever taller than the masthead
   band. --ev-logo-max-height overrides the cap per event if one is ever needed.

   Because both dimensions are now auto, an image SMALLER than the cap renders
   at its own size rather than being upscaled into a blur -- so the storage rule
   still holds in the direction that matters: features/logos/utils/logo_images.py
   must keep storing event logos at more than 2x the cap here (it allows 2400px,
   comfortably clear), or the browser upscales and the result looks pixelated.

   Sizing note: this stylesheet inherits html { font-size: 10px } from
   style.css, so 1rem = 10px.
   --------------------------------------------------------------------------- */
.ev-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin: 0 auto;
}

.ev-title-logo {
  /* Both dimensions auto so the two caps below apply together and the browser
     scales the image between them on its OWN aspect ratio -- a tall image is
     limited by the height, a wide one by the width, and neither is distorted.
     Specifying one of them (as `width: 90vw` did) is what breaks that. */
  width: auto;
  height: auto;
  max-width: min(90vw, 960px);
  max-height: var(--ev-logo-max-height, 28rem);
  min-width: 0;
}

.ev-title-name {
  margin: 0;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   The controls strip (tab group + filter bar), in the same box as the content.

   These are laid out inside .container, which has its own width and padding,
   while every content block below them (.division-header, the tables, the
   brackets grid) sizes itself as 90vw capped at 1200px and centres in the
   VIEWPORT. Two different coordinate systems, so the two left edges disagreed by
   44px at 1600px wide -- and by a different amount at every other width, which
   is why it read as "nearly aligned" rather than as a deliberate indent.

   Restating the content's own rule here is what keeps them locked together: the
   filters are now measured off the same edge as the table they filter. Change
   one of these three numbers and change them all.
   --------------------------------------------------------------------------- */
.ev-controls {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 650px) {
  .ev-controls {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .ev-title {
    gap: 0.8rem;
  }

  .ev-title-logo {
    /* Full width is the CAP on a phone, not the size -- `width: 100%` here would
       re-impose on small screens exactly the square-crest problem the desktop
       rule above removes. Shorter cap than desktop because a phone viewport is
       ~600px tall, so the desktop cap would be nearly half of it. */
    max-width: 100%;
    max-height: var(--ev-logo-max-height, 20rem);
  }
}

/* ---------------------------------------------------------------------------
   The preview banner (event/templates/partial/preview_banner.html).

   Shown only on /event/preview/<token>/… — the three public pages reached with a
   link instead of the publish flags. Those pages are pixel-identical to the
   public ones on purpose, so this bar is the ONLY thing distinguishing a preview
   from the real thing: it is deliberately loud, sits above the event's own
   masthead, and is not dismissible.

   Amber rather than the event's theme colour: this is our message about the
   page, not the host's branding, and it must stay legible on every theme
   (partial/event_theme.html repaints the rest of the page per event).

   Sizing note: this stylesheet inherits html { font-size: 10px } from style.css,
   so 1rem = 10px.
   --------------------------------------------------------------------------- */
.ev-preview-banner {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto 2.4rem;
  padding: 1.4rem 1.8rem;
  border: 1px solid hsl(38, 80%, 55%);
  border-left-width: 6px;
  border-radius: 6px;
  background: hsl(45, 100%, 95%);
  color: hsl(30, 60%, 22%);
  font-size: var(--fs-8);
  line-height: 1.5;
}

@media (max-width: 650px) {
  .ev-preview-banner {
    width: 100%;
  }
}