:root {
  /* Primary brand blues */
  --brand-blue:       #4e89ae;
  --brand-dark-blue:  #43658b;
  --brand-accent:     #e76f51;   /* a warm accent (rusty orange) */
  --neutral-light:    #f3f4f6;
  --neutral-gray:     #efeff3;
  --text-primary:     #212121;
  --text-secondary:   #4a4a4a;

  /* Aliases used by toolbar / icons */
  --brand-1:          var(--brand-blue);
  --brand-2:          var(--brand-dark-blue);
  --accent:           var(--brand-accent);
  --white:            #ffffff;

  /* Typography */
  --font-base:       'Raleway', sans-serif;
  --font-heading:    'Montserrat', sans-serif; /* example */
}

#banner h1, .card h3, .notes-section h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 1px;
}

body{
  margin: 0;
  font-family: var(--font-base);
  color: var(--text-primary);
  background-color: var(--neutral-gray);
  padding-bottom: 4rem;
}

.site-header {
  position: relative;
  background: #4e89ae;
  height: 95px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
}

.site-header.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 1rem;
}


/* Basic */
a:hover {
    text-decoration: none;
}

.title h1 {
  font-size:24px;
  color:#FFF;
  font-weight:500;
}

/* Logo */
#logo {
    margin-top: 5px;
	padding-top: 5px;
	display: inline-block;
}

/* Nav */
#nav {
  position: static;   /* no longer absolute */
  margin: 0;
  font-size: 0.9em;
}

#nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav ul li {
  margin-left: 1.5rem;
}

#nav ul li a {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #cce3e6;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.25s;
}

#nav ul li.current a {
  background: transparent;
  color: #fff;
  border-bottom: 3px solid var(--brand-accent);
}

#nav ul li a:hover {
  background-color: var(--brand-accent); /* use accent here to stand out */
  color: #fff;
}

/* Banner */
#banner-wrapper {
  width: 50vw;
  max-width: 800px;
  min-width: 320px;
  margin: 40px auto 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Lighten the banner itself � white with a soft border instead of a full blue fill */
#banner {
  background: #ffffff;
  border: 2px solid #43658b;   /* pick up your header�s darker blue */
  color: #43658b;              /* match text to that same tone */
  padding: 24px 32px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: relative;
}

/* Watermark icon stays, but tint it to your darker blue */
#banner::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 150px; height: 150px;
  background: url('/static/img/football-icon.svg') no-repeat center/contain;
  filter: opacity(0.05) drop-shadow(0 0 0 #43658b);
  transform: translate(-50%, -50%) rotate(15deg);
  pointer-events: none;
}

/* Headline in your mid-blue, with a subtle weight bump */
#banner h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.8rem;
  color: #4e89ae;      /* your header�s primary blue */
  letter-spacing: 1px;
  margin: 0;
  animation: slideIn 0.8s ease-out;
}

#banner-subtext {
  background: #ebeff0;
  color: #212121;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  border: 1px solid #ccc;
  margin-top: 16px;
  margin-bottom: 0;
}
#banner-subtext a {
  color: #4e89ae;             /* accent just like your main header text */
  font-weight: 600;
  text-decoration: underline;
}
#banner-subtext a:hover {
  text-decoration: underline;
}

/* Keep your slideIn keyframes */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Download icon */
.icon-download        { color: var(--brand-1); transition: color .2s; }
.icon-download:hover  { color: var(--accent); }

/*Data Export Container */
.data-export {
  display: flex;
  justify-content: flex-start; /* push contents to the right */
  align-items: center;       /* vertically center if you have height */
}

.data-export-container {
  position: relative; /* establish a new stacking context */
  z-index: 10;        /* anything higher than the table�s z-index (default 0) */
  margin: 25px 0 -50px 0;
  background: #fff;
  border: 2px solid #000;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}


/* Mode toggle: Dynasty / Redraft (trade value page) */
.mode-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 18px 0 12px;
}

.mode-btn {
  background: #fff;
  border: 2px solid var(--brand-dark-blue);
  padding: 10px 28px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-dark-blue);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-btn:first-child {
  border-radius: 5px 0 0 5px;
}

.mode-btn:last-child {
  border-radius: 0 5px 5px 0;
  border-left: none;
}

.mode-btn.active {
  background-color: var(--brand-dark-blue);
  color: #fff;
}

.mode-btn:hover:not(.active) {
  background-color: #e8eef3;
}

/* Position filter buttons (trade value & stats tables) */
.position-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 14px;
}

/* Scoring type filter buttons � displayed below the position filters */
.scoring-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: -6px 0 16px;
  padding-top: 6px;
  border-top: 1px solid #e8eef3;
}

/* SFB button gets a distinct gold accent to signal it's an estimated format */
.scoring-filter-btn.sfb-btn {
  border-color: #b8860b;
  color: #7a5800;
}
.scoring-filter-btn.sfb-btn:hover {
  border-color: #b8860b;
  color: #b8860b;
  background-color: #fffbf0;
}
.scoring-filter-btn.sfb-btn.active {
  background-color: #b8860b;
  border-color: #b8860b;
  color: #fff;
}

/* Estimated-stat column styling � applied to the Bonus EV column when
   the SFB scoring filter is active. Visually signals these values are
   model estimates, not raw projected stats. */
.rankings-table td.col-est {
  background-color: #fffbef !important;
  font-style: italic;
  border-left: 2px solid #d4a017 !important;
  border-right: 2px solid #d4a017;
  color: #7a5800;
}
.rankings-table th.col-est-header {
  background: linear-gradient(135deg, #b8860b 0%, #d4a017 100%) !important;
  border-bottom: 3px solid #7a5800 !important;
  font-style: italic;
}

/* Footnote shown only when SFB scoring is active. */
.sfb-footnote {
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  color: #7a5800;
  background-color: #fffbef;
  border: 1px dashed #d4a017;
  border-radius: 4px;
  text-align: center;
}

.pos-filter-btn {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pos-filter-btn:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.pos-filter-btn.active {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Centered customize toggle row */
.customize-row {
  text-align: center;
  margin: 10px 0 12px;
}

.customize-toggle {
  background-color: var(--brand-blue);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.customize-toggle:hover {
  background-color: #3a6f91;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

/* Collapsible panel */
.customize-panel {
  background: #f9f9fb;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 12px;
  text-align: center;
}

/* Download + Search row: download icon left, search right */
.download-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
  position: relative;
  z-index: 10;
}

/* Hide DataTables filter briefly while it is moved into the toolbar (reduces flicker). */
.download-search-row:not(.dt-filter-ready) #statsTable_filter {
  opacity: 0;
}
.download-search-row.dt-filter-ready #statsTable_filter {
  opacity: 1;
  transition: opacity 0.12s ease-out;
}

.toolbar-icon {
  background: #fff;
  border: 2px solid #000;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.download-search-row #statsTable_filter {
  float: none;
  margin: 0;
}

.customize-panel .platform-select {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}

.customize-panel .platform-logo {
  width: 36px;
  height: 36px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.customize-panel .platform-logo.selected {
  border: 2px solid #007bff;
  box-shadow: 0 0 6px #007bff;
}

.sl-form-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sl-input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.8rem;
  width: 160px;
}

.sl-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 3px rgba(78,137,174,0.3);
}

.sl-or {
  font-size: 0.8rem;
  color: #999;
  font-weight: 600;
}

.sl-submit {
  padding: 6px 16px;
  font-size: 0.85rem;
}

/* Stats Table */
.container-stats-dfs {
    padding-left: 150px;
    padding-right: 150px;
    padding-bottom: 40px;
    padding-top: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    min-height: 800px; /* Adjust as needed */
    width: 30%;
    margin: 0 auto;
    margin-top: -25px;
    margin-bottom: 100px;
    flex-direction: row;
    overflow-x: auto; /* Allows horizontal scrolling if needed */
    white-space: nowrap; /* Prevents text from breaking and expanding table */
}

.container-stats-bestball {
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 40px;
    padding-top: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    min-height: 800px; /* Adjust as needed */
    width: 55%;
    margin: 0 auto;
    margin-top: -25px;
    margin-bottom: 100px;
    flex-direction: row;
    overflow-x: auto; /* Allows horizontal scrolling if needed */
    white-space: nowrap; /* Prevents text from breaking and expanding table */
}

.container-stats-season-long {
    padding: 20px 40px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    min-height: 800px;
    width: 75%;
    margin: 0 auto 100px;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
}

/* Compact rankings-style container � for tables (DFS, Bestball) that have
   far fewer columns than the full-stats tables. Shrink-wraps to its widest
   child instead of stretching to a fixed 75% page width, so columns size to
   their data and the table doesn't have huge gaps between cells. */
.container-stats-compact {
    padding: 30px 60px 40px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    width: fit-content;
    /* Floor wide enough for the filter buttons + search bar to fit on one row. */
    min-width: 520px;
    max-width: 95%;
    margin: 30px auto 100px;
    overflow-x: auto;
}

/* Let the table inside the compact container size to its content instead of
   filling the container; otherwise the rankings-table default `min-width:100%`
   would re-stretch it. */
.container-stats-compact .rankings-table {
    min-width: auto;
    width: auto;
    margin: 12px auto 0;
}

.container-stats-pts-against {
    padding-left: 150px;
    padding-right: 150px;
    padding-bottom: 40px;
    padding-top: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    min-height: 800px; /* Adjust as needed */
    width: 30%;
    margin: 0 auto;
    margin-top: -25px;
    margin-bottom: 100px;
    flex-direction: row;
    overflow-x: auto; /* Allows horizontal scrolling if needed */
    white-space: nowrap; /* Prevents text from breaking and expanding table */
}

/* Style the search box container */
#statsTable_filter {
    float: right;
    background-color: white;  /* White background for the container */
    border: 2px solid #000;   /* Black border around the container */
    padding: 10px;             /* Padding inside the box */
    border-radius: 5px;       /* Rounded corners */
    display: inline-block;    /* Keeps the search box inline */
    margin-bottom: 15px;      /* Adds space below */
}

/* Style the search input field */
#statsTable_filter input {
    border: 2px solid #62B6F0;/* Cool blue border */
    border-radius: 5px;       /* Rounded corners */
    font-size: 12px;          /* Adjust text size */
    outline: none;            /* Remove focus outline */
    transition: border-color 0.3s ease-in-out;
}

/* Change border color when focused */
#statsTable_filter input:focus {
    border-color: #007bff;    /* Darker blue on focus */
    box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5); /* Subtle glow effect */
}

/* Style and update font type for the 'Search:' label */
#statsTable_filter label {
    font-weight: bold;         /* Make label text bold */
    color: #333;               /* Dark color for text */
    display: inline-block;     /* Ensure it aligns with the input */
    font-size: 12px;           /* Adjust font size */
    font-family: 'Istok Web'
    margin-right: 10px;        /* Adds spacing between label and input */
    text-transform: uppercase; /* Make label text uppercase */
    letter-spacing: 1px;       /* Slight spacing between letters */
}



.styled-table {
    border-collapse: collapse; /* Ensures clean borders */
    width: 100%;
    border: 3px solid #000; /* Thick black border around the entire table */
    border-radius: 8px;
    font-size: 12px;
}

/* Header formatting (keeps existing styling) */
.styled-table thead th {
    background-color: #000000;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    border-bottom: 3px solid #000;
}
/* Freeze the first column */
.styled-table tbody td:first-child,
.styled-table thead th:first-child {
    position: sticky;
    left: 0;
    height: 100%;
}
/* Style columns 1-3 (excluding the header) */
.styled-table tbody td:nth-child(1),
.styled-table tbody td:nth-child(2),
.styled-table tbody td:nth-child(3) {
    background-color: #e3e3e3;
    font-weight: bold;
    text-align: center;
}

/* Style columns 4-9 (excluding the header) */
.styled-table tbody td:nth-child(4),
.styled-table tbody td:nth-child(5),
.styled-table tbody td:nth-child(6),
.styled-table tbody td:nth-child(7),
.styled-table tbody td:nth-child(8) {
    background-color: #FFF4E5; /* Soft pastel orange */
    text-align: center;
}

/* Style columns 10-12 (excluding the header) */
.styled-table tbody td:nth-child(9),
.styled-table tbody td:nth-child(10),
.styled-table tbody td:nth-child(11) {
    background-color: #f8f9fa; /* Light gray */
    text-align: center;
}

/* Style columns 13-16 (excluding the header) */
.styled-table tbody td:nth-child(12),
.styled-table tbody td:nth-child(13) {
    background-color: #FFF4E5; /* Soft pastel orange */
    text-align: center;
}
/* Style columns 18-20 (excluding the header) */
.styled-table tbody td:nth-child(14) {
    background-color: #f8f9fa; /* Light gray */
    text-align: center;
}
/* Style columns 18-20 (excluding the header) */
.styled-table tbody td:nth-child(15) {
    background-color: #FFF4E5; /* Soft pastel orange */
    text-align: center;
}

/* Add bold vertical borders to separate groups (including header row) */
.styled-table thead th:nth-child(4),
.styled-table thead th:nth-child(9),
.styled-table thead th:nth-child(12),
.styled-table thead th:nth-child(14),
.styled-table thead th:nth-child(15),
.styled-table tbody td:nth-child(4),
.styled-table tbody td:nth-child(9),
.styled-table tbody td:nth-child(12),
.styled-table tbody td:nth-child(14),
.styled-table tbody td:nth-child(15) {
    border-left: 3px solid #000; /* Left border for each new group */
    text-align: center;
}
/* Last column */
.styled-table tbody td:nth-child(21) {
    background-color: #e3e3e3;
    font-weight: bold;
    text-align: center;
}

/* Points Against Drop-Down */
.custom-dropdown-container {
  display: flex;
  justify-content: flex-start; /* push contents to the right */
  align-items: center;       /* vertically center if you have height */
  z-index: 20;
  margin: 25px 0 -60px 0;
}

.custom-dropdown-container h3 {
  margin: 5 0 12px;
  padding-right: 10px;
  font-size: 1.25rem;
  color: var(--brand-2);
  font-weight: 600;
}

.custom-dropdown {
  position: relative;    /* necessary for z-index to apply */
  z-index: 30;           /* float above virtually everything */
}

#options.custom-dropdown {
  appearance: none;           /* remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--white);
  border: 1px solid var(--brand-2);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 1rem;
  color: var(--text-dark);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 60%;                /* adjust as needed */
}

#options.custom-dropdown:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 5px rgba(98,182,240,0.4);
}

/* Optional: add a custom arrow using a pseudo-element */
#options.custom-dropdown {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236265F0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.custom-dropdown-container input[type="submit"] {
  background: var(--brand-1);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-left: 12px;
}

.custom-dropdown-container input[type="submit"]:hover {
  background: var(--brand-2);
  transform: translateY(-1px);
}


@media (max-width: 765px) {
 /* 0. Make header padding tighter */
  .site-header,
  .site-header.container {
    margin: 0px;
    padding: 0rem 0.5rem;    /* cut vertical padding in half */
    height: auto;            /* ensure it grows only to its content */
  }

  /* 1. Shrink the logo */
  #logo img,
  #logo svg {
    width:83px;
    height:60px;
    display: block;
    margin:0px;
  }
  #logo {
    margin: 0px;
    padding: 0px;
  }

  /* 2. Compact the nav links */
  #nav {
    margin: 0;
    margin-left: auto;  /* this auto-margin in a flex container pushes it all the way right */
  }
  #nav ul {
    width: 90%;
    margin: 0 auto;
    margin-right: 0px;
  }
  #nav ul li {
    margin-left: 0rem;
    margin-right: 20px;
  }
  #nav ul li a {
    padding: 0.35rem 0.25rem;
    font-size: clamp(0.68rem, 2.6vw, 0.82rem);
    white-space: nowrap;
  }

  /* 6. Banner tweaks � keep title visible but tighten the notes block
     that was eating ~1/3 of the mobile viewport on stats pages. */
  #banner-wrapper {
    width: auto;
    max-width: none;
    margin: 14px 8px 12px;
    padding: 0;
  }
  #banner {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0;
  }
  #banner h1 {
    font-size: 1.25rem;
  }
  #banner-subtext {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.72rem;
    line-height: 1.3;
    padding: 6px 10px;
    margin: 8px 0 0;
  }
  #banner-subtext p {
    margin: 0;
  }
  #banner-subtext p + p {
    margin-top: 4px;
  }
  #banner-subtext .banner-note {
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--text-secondary, #4a4a4a);
  }
  /* Unique to DFS Stats */
  /* 1. Make the container full�bleed and remove giant side paddings */
  .container-stats-dfs {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    padding: 0.75rem;      /* uniform padding all around */
    min-height: auto;      /* let height grow with content */
    font-size: 0.9rem;     /* slightly smaller but readable */
    line-height: 1.4;
  }

  /* 2. Wrap your table in a responsive wrapper */
  .container-stats-dfs .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .container-stats-dfs .table-responsive table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    min-width: 600px;      /* only if you need a min width for columns */
  }


  /* Unique to Bestball Stats */
  .container-stats-bestball {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    padding: 0.75rem;      /* uniform padding all around */
    min-height: auto;      /* let height grow with content */
    font-size: 0.9rem;     /* slightly smaller but readable */
    line-height: 1.4;
  }
    /* 1. Let the table size to its content */
    .container-stats-bestball .table-responsive table {
      table-layout: auto;   /* DEFAULT behavior�columns size to content */
      width: auto;          /* don�t force 100% full-width */
      display: inline-table;/* shrink-wrap the table itself */
    }

    /* 2. Force each cell to only be as wide as its content */
    .container-stats-bestball .table-responsive th,
    .container-stats-bestball .table-responsive td {
      width: 1%;            /* CSS trick: 1% min-width = minimal content width */
      white-space: nowrap;  /* prevent wrapping so width = longest word */
      padding: 0.2rem 0.4rem;/* small padding for readability */
    }

    /* 3. Wrap the whole table with overflow so it won�t break layout */
    .container-stats-bestball .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .container-stats-season-long {
        padding: 6px;
        border: 1px solid #e0e6ea;
        background-color: #fff;
        border-radius: 8px;
        width: auto;
        max-width: 100%;
        margin: 0 8px 32px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    /* On mobile, drop the 520px floor and let the compact container fill the
       screen so the inner .table-responsive can handle horizontal scrolling.
       Leave a small side gutter so the page background still shows. */
    .container-stats-compact {
        padding: 6px;
        border: 1px solid #e0e6ea;
        background-color: #fff;
        border-radius: 8px;
        width: auto;
        min-width: 0;
        max-width: 100%;
        margin: 0 8px 32px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    .mode-toggle {
      margin: 8px 0 10px;
    }

    .mode-btn {
      padding: 7px 14px;
      font-size: 0.75rem;
    }

    /* Allow filter rows to wrap onto multiple lines instead of
       overflowing the viewport, and shrink the buttons aggressively
       so each row usually still fits on one line on a 360px phone. */
    .position-filters,
    .scoring-filters {
      flex-wrap: wrap;
      gap: 4px 5px;
      padding-left: 6px;
      padding-right: 6px;
    }

    .position-filters {
      margin: 8px 0 8px;
    }

    .scoring-filters {
      margin: 0 0 10px;
      padding-top: 6px;
    }

    .pos-filter-btn {
      padding: 5px 9px;
      font-size: 0.7rem;
      border-width: 1px;
      border-radius: 999px;
    }

    .customize-row {
      margin: 8px 0 10px;
    }

    .customize-toggle {
      font-size: 0.8rem;
      padding: 8px 16px;
    }

    .download-search-row {
      margin: 0 0 6px;
    }

    .toolbar-icon {
      transform: scale(0.8);
      transform-origin: left center;
    }

    .customize-toggle {
      font-size: 0.65rem;
      padding: 4px 8px;
    }

    .customize-panel {
      padding: 10px;
    }

    .customize-panel .platform-logo {
      width: 28px;
      height: 28px;
    }

    .sl-form-row {
      flex-direction: column;
      gap: 6px;
    }

    .sl-input {
      width: 70%;
    }


  /* 3. Tone down the search box � sit beside the download icon in the
        toolbar row instead of being pushed off-screen by a 100px left
        margin. */
  #statsTable_filter {
      width: auto;
      max-width: 60%;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      float: none;
      text-align: right;
      margin: 0;
      padding: 4px 6px;
      box-sizing: border-box;
    }
  #statsTable_filter label {
    font-size: 0.65rem;
    width: auto;
    margin: 0;
    padding: 0;
    letter-spacing: 0.5px;
  }
  #statsTable_filter input {
    width: 110px;
    max-width: 100%;
    font-size: 0.75rem;
    padding: 2px 4px;
    border: 1px solid #62B6F0;
    border-radius: 4px;
  }
  /*Data Export Container */
  .data-export {
    display: flex;
    justify-content: flex-start; /* push contents to the right */
    align-items: center;       /* vertically center if you have height */
  }
  .data-export-container {
    /* scale everything to 50% */
    transform: scale(0.75);
    /* choose the anchoring point you want�top right, top left, etc */
    transform-origin: top left;
    margin: 10px 0 -52px 0;
    border: 2px solid #000;
    padding: 0.25rem 0.5rem;
  }

  #statsTable {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;  /* iOS momentum */
      position: relative;                /* for fading?edge */
      margin: 0px;
  }
  .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
    }

  /* 4. Compact table typography for mobile � large enough to read but
        small enough to keep horizontal scroll manageable. */
  .styled-table {
    overflow-x: auto;
    width: auto;
    font-size: 0.7rem;
    border: 1px solid #666;
    border-radius: 1px;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .styled-table thead th {
    font-size: 0.68rem;
    padding: 4px 5px;
    width: auto;
  }
  .styled-table tbody td {
    padding: 3px 5px !important;
    line-height: 1.25;
    width: auto;
  }


  /* Unique to March-Madness Stats */
      .summary-tables-container {
        gap: 10%;
        display: flex;               /* Align tables side by side */
        justify-content: left;     /* Centers tables without excessive spacing */
        flex-wrap: nowrap;             /* Ensures responsiveness */
        margin-left: 7px;
        margin-bottom: 0px;
    }
    .table-section {
        transform: scale(0.75); /* Slightly shrink */
        min-width: 275px;            /* Prevents excessive shrinking */
        font-size: 8px;
        margin: 0px;
        padding: 0px;
     }

    /* Table section headings */
    .table-section h3 {
        margin-bottom: 10px;         /* Reduces space between heading and table */
        font-size: 12px;            /* Keeps text readable without excess space */
        font-weight: bold;
        color: #333;
    }

    .container-stats {
      transform: scale(0.75); /* REMOVE OR CHANGE TO scale(0.9) */
      transform-origin: top center;
      margin: 0px;
      padding: 0px;
      flex-direction: row;
      margin-bottom: 0px;
      overflow-x: auto;
      white-space: normal;  /* allows wrapping */
    }

    /* Keep the first column frozen on mobile too so the player name (or
       rank) stays in view while users scroll horizontally through the
       stats. We also have to opaque the background so the cells beneath
       it don't bleed through during the scroll. */
    .styled-table tbody td:first-child,
    .styled-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: inherit;
        box-shadow: 2px 0 0 rgba(0, 0, 0, 0.08);
    }
    .styled-table thead th:first-child {
        background-color: #000;
    }

    .site-footer p,
    footer p {
      font-size: 11px;
      line-height: 1.35;
    }

}

/* Customize-for-your-league card on trade value page */
.customize-trade-value-card {
  max-width: 640px;
  margin: 0 auto 30px auto;
  padding: 0 16px;
}
.customize-inner {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
  padding: 20px 28px;
  text-align: center;
}
.customize-inner h3 {
  margin: 0 0 6px 0;
  font-size: 18px;
  color: var(--text-primary);
}
.customize-inner p {
  margin: 0 0 14px 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.customize-inner form {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.customize-input {
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid #bbb;
  border-radius: 6px;
  width: 220px;
  font-family: var(--font-base);
}
.customize-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(78,137,174,0.25);
}

.personalized-badge {
  font-size: 15px;
}
.personalized-badge a {
  color: var(--brand-blue);
  text-decoration: underline;
}

/* Tighten the trade value banner so the table is visible above the fold. */
.banner-tagline {
  margin: 0 auto 6px;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.4;
}

/* Collapsible methodology disclosure on the trade value page. Keeps the long
   explanation accessible without pushing the table down on first paint. */
.methodology {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid #d6dee8;
  border-radius: 8px;
  padding: 0 14px;
}
.methodology[open] {
  padding: 0 14px 8px;
}
.methodology > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-blue, #4e89ae);
  display: flex;
  align-items: center;
  gap: 6px;
}
.methodology > summary::-webkit-details-marker { display: none; }
.methodology > summary::before {
  content: '+';
  display: inline-block;
  width: 14px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.methodology[open] > summary::before { content: '\2212'; }
.methodology > summary:hover { text-decoration: underline; }
.methodology p {
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary, #54667a);
}
.methodology p:first-of-type { margin-top: 0; }
.methodology p:last-of-type { margin-bottom: 0; }

/* =========================================================
   RANKINGS TABLE � Professional, high-impact design
   ========================================================= */
.rankings-table {
  /* `min-width: 100%` keeps narrow tables (rankings page, ~8 cols) flush with
     the container, while `width: auto` lets wide tables (season-long full
     stats, ~18 cols) grow and trigger the horizontal scroll on
     `.table-responsive`. */
  min-width: 100%;
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.rankings-table thead th {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: 14px 12px;
  text-align: center;
  border-bottom: 3px solid #e76f51;
  white-space: nowrap;
}

.rankings-table thead th:first-child {
  text-align: center;
  width: 50px;
}

.rankings-table thead th:nth-child(2) {
  text-align: left;
  min-width: 160px;
}

.rankings-table thead th:last-child {
  background: linear-gradient(135deg, #0f2b47 0%, #1a4470 100%);
  font-size: 12px;
  letter-spacing: 1.2px;
  border-left: 2px solid #e76f51;
}

.rankings-table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid #eef1f5;
}

.rankings-table tbody tr:hover {
  background-color: #f0f7ff !important;
  transform: scale(1.005);
  box-shadow: 0 2px 8px rgba(78,137,174,0.15);
}

.rankings-table tbody td {
  padding: 12px 12px;
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid #eef1f5;
}

.rankings-table tbody td:first-child {
  font-weight: 800;
  font-size: 15px;
  color: #1e3a5f;
  text-align: center;
  width: 50px;
}

.rankings-table tbody td:nth-child(2) {
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: #1a1a2e;
}

/* Alternating row backgrounds */
.rankings-table tbody tr:nth-child(even) {
  background-color: #f8fafc;
}
.rankings-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}


/* Position badges */
.pos-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pos-badge.pos-qb {
  background: #fee2e2;
  color: #b91c1c;
}
.pos-badge.pos-rb {
  background: #dbeafe;
  color: #1d4ed8;
}
.pos-badge.pos-wr {
  background: #dcfce7;
  color: #166534;
}
.pos-badge.pos-te {
  background: #fef3c7;
  color: #92400e;
}

/* Value column � the dominant score column (far right) */
.score-cell {
  position: relative;
  padding: 10px 16px !important;
  background-color: #f8fbff;
  border-left: 2px solid #e2ecf5;
}
.score-bar {
  position: absolute;
  left: 6px;
  bottom: 5px;
  height: 5px;
  border-radius: 3px;
  opacity: 0.8;
  transition: width 0.4s ease;
}
.score-value {
  position: relative;
  z-index: 2;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.3px;
}

/* Score color tiers */
.score-elite .score-value { color: #065f46; }
.score-elite .score-bar { background: linear-gradient(90deg, #34d399, #10b981); }

.score-high .score-value { color: #1d4ed8; }
.score-high .score-bar { background: linear-gradient(90deg, #60a5fa, #3b82f6); }

.score-mid .score-value { color: #92400e; }
.score-mid .score-bar { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

.score-low .score-value { color: #9ca3af; }
.score-low .score-bar { background: linear-gradient(90deg, #d1d5db, #9ca3af); }

/* Points columns (Season Pts, Career Pts) */
.pts-cell {
  font-weight: 600;
  color: #1e3a5f;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}


/* DataTables overrides for rankings */
table.rankings-table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table.rankings-table.dataTable thead th {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%) !important;
  border-bottom: 3px solid #e76f51 !important;
}
table.rankings-table.dataTable tbody tr:hover td {
  background-color: #f0f7ff !important;
}
.rankings-table .sorting,
.rankings-table .sorting_asc,
.rankings-table .sorting_desc {
  cursor: pointer;
}
.dataTables_wrapper .rankings-table + .dataTables_info {
  display: none;
}

/* Mobile adjustments for rankings table */
@media (max-width: 765px) {
  .rankings-table {
    font-size: 9.5px;
  }
  /* Allow the header to wrap to two short lines (e.g. BONUS / EV,
     PROJEC- / TIONS) so columns are sized to their data, not to the
     widest header word. This is the biggest win for fitting more
     columns into the viewport. */
  .rankings-table thead th {
    padding: 5px 3px;
    font-size: 7.5px;
    letter-spacing: 0.1px;
    white-space: normal;
    line-height: 1.1;
    vertical-align: middle;
    text-transform: uppercase;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .rankings-table tbody td {
    padding: 4px 3px;
    font-size: 9.5px;
  }
  .pos-badge {
    padding: 1px 4px;
    font-size: 8px;
    letter-spacing: 0;
  }
  .rank-num {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }
  .score-value {
    font-size: 10px;
  }
  .score-cell {
    padding: 4px 6px !important;
  }
  .score-bar {
    left: 4px;
    bottom: 3px;
    height: 3px;
  }

  /* Cap individual non-frozen header widths so the implicit table layout
     wraps the labels instead of stretching the column. Width is the
     *header* hint � the actual column will be as wide as its widest data
     value (badges, numbers), which is what we want. */
  .rankings-table thead th:nth-child(n+3) {
    max-width: 56px;
  }

  /* Tighten the player-name column so it doesn't single-handedly push the
     table wider than the screen. */
  .rankings-table thead th:nth-child(2) {
    min-width: 84px;
    max-width: 100px;
  }
  .rankings-table tbody td:nth-child(2) {
    font-size: 10px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Freeze the rank (#) and player name columns so the row context stays
     in view as users scroll the rest of the columns horizontally. */
  .table-responsive {
    position: relative;
  }
  .table-responsive .rankings-table tbody td:first-child,
  .table-responsive .rankings-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #fff;
    box-shadow: 2px 0 0 rgba(0, 0, 0, 0.06);
  }
  .table-responsive .rankings-table tbody td:first-child {
    font-size: 10px;
  }
  .table-responsive .rankings-table tbody tr:nth-child(even) td:first-child {
    background-color: #f8fafc;
  }
  .table-responsive .rankings-table thead th:first-child {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    z-index: 3;
  }

  .table-responsive .rankings-table tbody td:nth-child(2),
  .table-responsive .rankings-table thead th:nth-child(2) {
    position: sticky;
    left: 26px; /* matches frozen rank column width above */
    z-index: 2;
    background-color: #fff;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
  }
  .table-responsive .rankings-table tbody tr:nth-child(even) td:nth-child(2) {
    background-color: #f8fafc;
  }
  .table-responsive .rankings-table thead th:nth-child(2) {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    z-index: 3;
  }

  /* The estimated-stat coloring uses !important on desktop; preserve it
     here so the SFB scoring column still reads as estimated, but allow
     the sticky frozen rank/name columns to keep their own backgrounds. */
  .table-responsive .rankings-table tbody td.col-est {
    background-color: #fffbef !important;
  }
}

.site-footer,
footer {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  margin-top: 2rem;
  padding: 12px 8px;
  background-color: #43658b;
  color: white;
  text-align: center;
  box-sizing: border-box;
}
/* ============================================================
   League-personalized stats page � scoring card & risers/fallers
   ============================================================ */

.banner-league-sub {
  font-size: 0.95rem;
  color: #fff;
  opacity: 0.85;
  margin: 4px 0 0;
  letter-spacing: 0.5px;
}

.league-scoring-card {
  background: #fff;
  border: 1px solid #d0dce8;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 18px;
  box-shadow: 0 1px 4px rgba(78,137,174,0.08);
}

.scoring-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.scoring-type-badge {
  background: var(--brand-blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.scoring-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.scoring-card-diffs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 14px;
}

.scoring-diffs-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-right: 2px;
}

.scoring-diff-pill {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid transparent;
}

.scoring-diff-pill .diff-vs {
  font-weight: 400;
  opacity: 0.75;
  margin-left: 3px;
}

.diff-higher {
  background: #eaf4ec;
  color: #2a6b38;
  border-color: #b2d9bb;
}

.diff-lower {
  background: #fdf0f0;
  color: #923030;
  border-color: #f0c0c0;
}

.scoring-card-match {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

@media (max-width: 600px) {
  .scoring-card-diffs { flex-direction: column; align-items: flex-start; }
}