/* =========================================================
   TABLE OF CONTENTS
   =========================================================
   1. Rankings Page Flex Display Controls & DIV Layout
   2. Page Header Banner Styles
   3. Grade Scale Styles
   4. Player Card Modal Styling
      4.1 Modal Dialog Placement
      4.2 Modal Box Styling
      4.3 Scrollable Inner Body
      4.4 Disable Body Scroll
      4.5 Player Card Header Layout
   5. Player Header Block (Outside Modal)
   6. Player Card Animations
   7. Player Card Text Elements
   8. Ranking Key Styles
   9. How To Use Block
   ========================================================= */


/* =========================================================
   1. RANKINGS PAGE FLEX DISPLAY CONTROLS & DIV LAYOUT
   ========================================================= */
html, body {
  overflow-x: hidden;
}

.ranking-flex-display {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 20px !important;
  box-sizing: border-box;
  width: 100%;
}
@media (min-width: 768px) {
  .ranking-flex-display {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
}


/* =========================================================
   2. PAGE HEADER BANNER STYLES
   ========================================================= */
.page-header-banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border-bottom: 3px solid #1de1d1;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  padding: 5px 30px;
  flex-wrap: wrap;
}
.banner-content { text-align: left; max-width: 100%; }
.page-title {
  font-size: 24px; font-weight: 700; margin: 0;
  color: #1de1d1; font-family: 'Poppins', sans-serif;
}
.page-subtitle {
  margin-top: 10px; font-size: 16px; font-weight: 400;
  color: #ddd; font-family: 'Poppins', sans-serif;
}
.page-title-descriptions {
  margin-top: 15px; font-size: 12px; padding: 15px 20px;
  background: #111; border-left: 4px solid #1de1d1;
  border-radius: 6px; font-family: 'Poppins', sans-serif;
}
.page-title-descriptions p {
  margin: 4px 0; font-size: 1rem; font-weight: 400; color: #ddd;
}
.page-title-descriptions span.label { font-weight: 600; color: #1de1d1; }
.page-title-descriptions span.value { font-weight: 400; color: #fff; }


/* =========================================================
   3. GRADE SCALE STYLES
   ========================================================= */
.grade-scale {
  min-width: 15%;
  max-width: 100%;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #1de1d1;
  padding: 5px 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(29, 225, 209, 0.3);
  animation: slideFadeIn 2.5s ease-in-out;
}
.grade-scale h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #1de1d1;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.grade-scale ul { list-style: none; padding: 0; margin: 0; }
.grade-scale li {
  margin: 6px 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grade-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 1.2rem;
  font-weight: 700;
}
.grade-icon.elite { color: #ff4500; width: 25%; }
.grade-icon.solid { color: #00c853; width: 25%; }
.grade-icon.avg   { color: #ccc;    width: 25%; }
.grade-icon.below { color: #ff1744; width: 25%; }

/* ------------ Responsive Grade Scale ------------- */
@media (max-width: 600px) {
  .header-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .banner-content { text-align: center; }

  .grade-scale {
    margin: 15px auto 0;
    padding: 5px 15px;
    width: 100%;
    box-sizing: border-box;
  }

  .grade-scale h4 { font-size: 16px; }

  .grade-scale li {
    justify-content: flex-start;
    gap: 6px;
    font-size: 13px;
  }

  .grade-icon { width: auto; }
}

/* Expand grade scale on tablets so text doesn't wrap */
@media (min-width: 601px) and (max-width: 1024px) {
  .grade-scale {
    min-width: 35%;
  }
}


/* =========================================================
   4. PLAYER CARD MODAL STYLING
   ========================================================= */

/* ---------- 4.1 Modal Dialog Placement ---------- */
#statGlossaryModal .modal-dialog,
#iconKeyModal .modal-dialog,
#howToUseModal .modal-dialog,
#oddsScopeModal .modal-dialog {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 75vw; max-height: 90vh; max-width: 90%;
  overflow-y: auto; margin: 0; padding: 0; z-index: 10000;
}
@media (max-width: 768px) {
  #statGlossaryModal .modal-dialog,
  #iconKeyModal .modal-dialog,
  #howToUseModal .modal-dialog,
  #oddsScopeModal .modal-dialog { width: 95vw; }
}

/* Full-screen player / team card modal */
#playerCardModal,
#teamCardModal {
  background: #1e1e1e;
  height: 1px;
  left: 50%;
  overflow: hidden;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease 0.5s, height 0.5s ease;
  width: 0;
}

#playerCardModal.show,
#teamCardModal.show {
  height: 100vh;
  left: 0;
  top: 0;
  transform: none;
  transition: width 0.5s ease, height 0.5s ease 0.5s;
  width: 100vw;
}

#playerCardModal .modal-dialog,
#teamCardModal .modal-dialog {
  height: 100%;
  margin: 0;
  max-width: none;
  width: 100%;
}

#oddsScopeModal .modal-dialog {
  left: 0;
  transform: translateY(-50%);
  width: 95vw;
  max-width: 100%;
}

/* ---------- 4.2 Modal Box Styling ---------- */
#statGlossaryModal .modal-content,
#iconKeyModal .modal-content,
#howToUseModal .modal-content,
#oddsScopeModal .modal-content {
  background-color: #141a1a; color: #fff; padding: 5px;
  border: 2px solid #1de1d1; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  animation: fadeInCard 0.4s ease-out;
}

#playerCardModal .modal-content,
#teamCardModal .modal-content {
  animation: fadeInCard 0.4s ease-out;
  background-color: #141a1a;
  border: 2px solid #1de1d1;
  border-radius: 0;
  box-shadow: rgba(29, 225, 209, 0.25) 0px 54px 55px,
              rgba(29, 225, 209, 0.12) 0px -12px 30px,
              rgba(29, 225, 209, 0.12) 0px 4px 6px,
              rgba(29, 225, 209, 0.17) 0px 12px 13px,
              rgba(29, 225, 209, 0.09) 0px -3px 5px;
  color: transparent;
  height: 100%;
  padding: 5px;
  transition: color 0.5s ease;
}

#playerCardModal.show .modal-content,
#teamCardModal.show .modal-content {
  color: #fff;
  transition: color 0.5s ease 0.5s;
}

/* ---------- 4.3 Scrollable Inner Body ---------- */
#playerCardModal .modal-body,
#teamCardModal .modal-body,
#statGlossaryModal .modal-body,
#iconKeyModal .modal-body,
#howToUseModal .modal-body,
#oddsScopeModal .modal-body { max-height: 75vh; overflow-y: auto; }

#playerCardModal .modal-body,
#teamCardModal .modal-body {
  max-height: calc(100vh - 120px);
}

/* ---------- 4.4 Disable Body Scroll ---------- */
body.modal-open { overflow: hidden; }

/* ---------- 4.5 Player Card Header Layout ---------- */
#playerCardHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 15px;
}

.modal {
  z-index: 100000001 !important;
}

/* ----- Player image in header ----- */
#playerCardHeader img {
  border-radius: 10px;
  border: 2px solid #1de1d1;
  width: 70px; height: 70px;
  margin-right: 15px;
}

/* ----- Player info in header ----- */
#playerCardHeader .player-info { flex: 1; min-width: 200px; }


/* =========================================================
   5. PLAYER HEADER BLOCK (OUTSIDE MODAL)
   ========================================================= */
.player-header {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 15px; margin-bottom: 20px;
}
.player-header img { width: 90px; border-radius: 10px; border: 2px solid #1de1d1; }
.player-header .player-info { flex: 1; min-width: 0; }

/* ----- Responsive behavior ----- */
@media (max-width: 767px) {
  .player-header {
    flex-direction: row; text-align: left;
  }
  .player-header img { width: 70px; }
  .player-header .player-info { margin-top: 0; }
  #playerCardHeader { flex-direction: row; text-align: left; }
  #playerCardHeader .player-info { margin-top: 0; }
}


/* =========================================================
   6. PLAYER CARD ANIMATIONS
   ========================================================= */
@keyframes fadeInCard {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}


/* =========================================================
   7. PLAYER CARD TEXT ELEMENTS
   ========================================================= */
#playerCardName {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #1de1d1;
  margin: 0;
  text-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.player-info .player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.player-info .player-meta div {
  background: #122133;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
#playerCardHeader .player-info p {
  margin: 3px 0; font-size: 14px; color: #ccc;
}

/* ----- Grade section inside player card ----- */
#playerCardGrades {
  background: #121212; border-radius: 10px; padding: 15px; margin-top: 10px;
  border-left: 4px solid #1de1d1;
}
#playerCardGrades p { margin: 5px 0; font-size: 15px; color: #eee; }

/* ----- Report dropdown styling ----- */
#playerCardModal select {
  margin-top: 15px; padding: 8px 12px;
  background-color: #222; color: #fff;
  border: 1px solid #444; border-radius: 6px;
  font-family: 'Poppins', sans-serif; font-size: 14px;
}

/* ----- Loading animation text ----- */
#playerCardLoading { text-align: center; margin-top: 20px; font-style: italic; color: #888; }

/* Standard close button positioning for player card modal */
#playerCardModal .modal-header .close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 32px;
  color: #fff;
  opacity: 1;
}


/* =========================================================
   8. RANKING KEY STYLES
   ========================================================= */
.ranking-key {
  margin-top: 20px; padding: 10px; background: #1e1e1e;
  border-radius: 6px; font-size: 14px; color: #fff;
}
.ranking-key h4 {
  margin-top: 0; font-size: 1.1em; border-bottom: 1px solid #444;
  padding-bottom: 5px; margin-bottom: 8px;
}
.ranking-key .category-icon { margin-right: 6px; font-size: 1.1em; }

/* spacing and layout for icon key entries */
.ranking-key > div {
  margin-bottom: 12px;
}

.ranking-key > div small {
  display: block;
  margin-left: 22px;
  margin-top: 2px;
}


/* =========================================================
   9. HOW TO USE BLOCK
   ========================================================= */
.how-to-use { background: #1e1e1e; border-radius: 6px; padding: 10px; margin-top: 20px; color: #fff; }
.howToUseContainer, .statGlossaryContainer { margin-top: 30px; text-align: center; }
.howToUseContent {
  display: none; max-width: 90%; margin: 20px auto; font-size: 12px;
  text-align: left; background: #1e1e1e; color: #eee; padding: 20px;
  border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.howToUseToggle, .statGlossaryToggle {
  background:#009688; color:#fff; border:none; padding:10px 20px;
  border-radius:5px; cursor:pointer; font-size:16px; font-weight:600;
  transition: background 0.3s ease;
}
.howToUseToggle:hover, .statGlossaryToggle:hover { background:#00796b; }

/* Utility buttons row at bottom */
.utility-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  text-align: center;
}

.utility-btn { 
  background:#009688; 
  color:#fff; 
  border:none; 
  padding:10px 20px; 
  border-radius:5px; 
  cursor:pointer; 
  font-size:16px; 
  font-weight:600; 
  transition: background 0.3s ease; 
} 

.utility-btn:hover { background:#00796b; } 























/*Experimental stuff ------ this is for the NHL's soon to be Expandable Matchups Page with Line Data. :) Fuck you Parker. */
.nhl-detail-card {
    background: linear-gradient(to bottom, #003333, #001f1f);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    font-family: 'Poppins', sans-serif;
}

.nhl-detail-section {
    background: rgba(255,255,255,0.05);
    padding: 10px 15px;
    border-radius: 6px;
    flex: 1 1 200px;
    min-width: 180px;
}

.nhl-detail-section h4 {
    font-size: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 4px;
    text-transform: uppercase;
    color: #00bcd4;
}

.nhl-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px;
    margin-top: 12px;
}

.nhl-detail-grid div {
    background: rgba(0, 188, 212, 0.15);
    padding: 5px;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
}

.nhl-detail-grid span {
    display: block;
    font-weight: bold;
    color: #1de1d1;
    font-size: 12px;
}

/* narrow + centered control column */
th.control-col, td.details-control { width: 36px; text-align: center; }


/* Default collapsed state */
td.details-control::before {    
    font-size: 1.2em;
    color: #28a745; /* green */
    cursor: pointer;
}

/* Expanded state */
tr.shown td.details-control::before {
    
    font-size: 1.2em;
    color: #dc3545; /* red */
}
/* Base button style */
.row-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: #444; /* dark gray background */
    color: #1de1d1; /* teal text color */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
}

/* Collapsed (default) state */
.row-toggle::before {
    content: "+";
}

/* Expanded state */
tr.shown .row-toggle::before {
    content: "–"; /* en dash (minus) */
}

/* Optional hover effect */
.row-toggle:hover {
    background: #666;
}

/* 3-up line header above the detail grids */
.nhl-line3{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:14px;
  margin:10px 0 16px;
}

.nhl-slot{
  background: var(--panel, rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18) inset, 0 2px 8px rgba(0,0,0,.18);
}

.nhl-slot header{
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.04em;
  color: var(--accent, #1de1d1);
  margin-bottom:8px;
  text-transform:uppercase;
}

/* vertical stat list: label left, value right */
.nhl-stat-vert{
  display:grid;
  grid-template-columns: 1fr auto;
  row-gap:6px;
  column-gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}
.nhl-stat-vert li{ display:contents; }
.nhl-stat-vert span{
  opacity:.75;
  font-size:.84rem;
}
.nhl-stat-vert strong{
  font-weight:700;
  font-variant-numeric: tabular-nums;
  text-align:right;
}

/* responsive: stack on small widths */
@media (max-width: 900px){
  .nhl-line3{ grid-template-columns:1fr; }
}

.nhl-subheader {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1de1d1; 
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 4px;
}

.nhl-line3{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px,1fr));
  gap:24px;
}

/* Put the 4th and 5th cards under the gaps between the top 3 */
.nhl-line3 .nhl-slot:nth-child(4){ grid-column:1; } /* left spot */
.nhl-line3 .nhl-slot:nth-child(5){ grid-column:3; } /* right spot */

/* Responsive: stack to 2 cols, then 1 */
@media (max-width: 900px){
  .nhl-line3{ grid-template-columns:repeat(2, minmax(220px,1fr)); }
  .nhl-line3 .nhl-slot:nth-child(4),
  .nhl-line3 .nhl-slot:nth-child(5){ grid-column:auto; } /* normal flow */
}
@media (max-width: 560px){
  .nhl-line3{ grid-template-columns:1fr; }
}







/* 3×2 layout, boxes keep original width */
.nhl-line3{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin: 10px 0 16px;
}

/* Top row (1/3 each) */
.nhl-line3 .nhl-slot:nth-child(1){ grid-column: 1 / span 2; }
.nhl-line3 .nhl-slot:nth-child(2){ grid-column: 3 / span 2; }
.nhl-line3 .nhl-slot:nth-child(3){ grid-column: 5 / span 2; }

/* Bottom row inset/centered, same width as top */
.nhl-line3 .nhl-slot:nth-child(4){ grid-column: 2 / span 2; }
.nhl-line3 .nhl-slot:nth-child(5){ grid-column: 4 / span 2; }

/* Responsive: two cols then one */
@media (max-width: 900px){
  .nhl-line3{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
  .nhl-line3 .nhl-slot:nth-child(n){ grid-column: auto; } /* normal flow */
}
@media (max-width: 560px){
  .nhl-line3{ grid-template-columns: 1fr; }
}

/* Center the 3-wide metrics rows under the lineup */
.nhl-detail-grid.metrics{
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 24px;
  max-width: 980px;      /* tweak if you want tighter/wider */
  margin: 12px auto;     /* centers the row */
  justify-items: stretch;/* boxes fill their column */
}

.metric-compare{display:flex;gap:.4rem;margin:.25rem 0 .35rem}
.team-metric{flex:1;text-align:center;background:rgba(255,255,255,.06);border-radius:.5rem;padding:.35rem .4rem}
.team-metric .team{display:block;font-weight:600;letter-spacing:.3px;color:var(--accent,#1de1d1);opacity:.95}
.team-metric .value{display:block;font-weight:800;font-size:1.05rem;line-height:1.1;color:#fff}

.edge.win{color:#4caf50}
.edge.lose{color:#f44336}
.edge.even{color:#ffeb3b}

/* NHL line select dropdown */
#oppsline-select {
  background-color: #1c2833;      /* dark background to match your theme */
  color: #e0f7fa;                /* light teal text */
  border: 1px solid #1de1d1;     /* teal border */
  border-radius: 8px;            /* rounded corners */
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  outline: none;
  appearance: none;              /* removes default arrow in most browsers */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%1de1d1' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 25%;
}

#oppsline-select:hover {
  border-color: #1de1d1;
}

#oppsline-select:focus {
  border-color: #1de1d1;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

#oddsScopeTable .odds-logo {
  height: 32px;
}