/* =========================================================
   NFL SEASON SIMULATOR - page-specific styles
   Everything else (surfaces, cards, buttons, lists, tile fills,
   dark mode) comes from /css/w3style.css. What's left here has
   no w3 / w3-expanded equivalent yet.
========================================================= */

/* =========================================================
   FULL WINDOW WIDTH
   w3.css caps body and nav at 1600px; the 18-week grid needs
   every pixel, so this page uses the whole window instead.
========================================================= */
body,
nav.w3-top {
  max-width: none;
}


/* =========================================================
   SIDE-BY-SIDE LAYOUT
   Stacks below 1100px (w3 has no breakpoint-scoped flex direction)
========================================================= */
#playoff-sidebar {
  width: 520px;
  min-width: 480px;
  max-width: 560px;
}

@media (max-width: 1100px) {
  #main-layout,
  #standings-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  #playoff-sidebar {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}


/* =========================================================
   MAIN GAME TABLE
   Fixed column widths with sticky Team/Record columns; the
   division rows are nested tables, so widths must match.
========================================================= */
:root {
  --team-col: 150px;
  --record-col: 60px;
  --week-col: 44px;
}

#game-table,
.division-container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

#game-table {
  /* DO NOT COMPRESS - SCROLL INSTEAD */
  min-width: calc(var(--team-col) + var(--record-col) + (18 * var(--week-col)));
}

#game-table thead th {
  padding: 4px 2px;
  text-align: center;
  white-space: nowrap;
}

#game-table tbody td {
  padding: 3px 2px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

/* Keep the pinned cells' z-index inside the grid, so they can't paint
   over the site header (w3-top, z-index 1) or the sidebar (z-index 3). */
#table-container {
  isolation: isolate;
}

.sticky {
  position: sticky;
  left: 0;
  z-index: 3;
}

.name-cell {
  width: var(--team-col);
  text-align: left !important;
}

.record {
  width: var(--record-col);
}

.sticky.record {
  left: var(--team-col);
}

/* Week columns get no width of their own (in the header or the division
   tables), so on a wide window both share the extra space evenly across
   the 18 weeks and stay lined up. The table's min-width above keeps each
   week at least --week-col wide. */
.weekcol {
  width: auto;
}

#game-table td.collapse-wrapper {
  padding: 0;
  border-bottom: none;
}

.division-header-row td {
  padding: 4px 6px !important;
  text-align: left !important;
}


/* =========================================================
   GAME TILES
   Fill / text / border colors come from w3 classes set in app.js.
========================================================= */
.opp-label {
  display: inline-block;
  min-width: 34px;
  padding: 3px 3px;
  text-align: center;
  font-size: 11px;
  cursor: pointer;
  transition: 120ms;
}

.opp-label:hover {
  outline: 1px solid #5a8cff;
  filter: brightness(1.1);
}

/* Predicted result; outline width scales with the spread via --pred-w */
.predicted-win {
  outline: var(--pred-w, 1px) solid #22c55e;
  outline-offset: calc(-1 * var(--pred-w, 1px));
}

.predicted-loss {
  outline: var(--pred-w, 1px) solid #ef4444;
  outline-offset: calc(-1 * var(--pred-w, 1px));
}

/* Final result went against the prediction */
.upset {
  position: relative;
  box-shadow: 0 0 0 2px #facc15;
}

.upset::after {
  content: "!";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #facc15;
  color: #111;
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}


/* =========================================================
   TOOLBAR
   w3-btn-group draws a grey outline and dividers (#444 in dark
   mode); on the blue buttons use the fill color and a faint
   white divider instead.
========================================================= */
.header-buttons .w3-btn-group {
  border-color: #0966AF !important;
}

.header-buttons .w3-btn-group > .w3-button + .w3-button {
  border-left-color: rgba(255, 255, 255, 0.35) !important;
}


/* =========================================================
   PRINT - drop the site chrome and print the grid
========================================================= */
@media print {
  nav.w3-top, #mySidebar, #myOverlay, footer, .header-buttons {
    display: none !important;
  }
  .w3-main {
    margin: 0 !important;
  }
}