/* 🌐 Root Variables for Theme Colors & Fonts */
:root {
  /* 🎨 Colors */
  --primary-color: #2a3f54;       /* Default header background */
  --secondary-color: #222;        /* Submenu background */
  --accent-color: #FFD700;        /* Highlight / hover accent */
  --link-color: #003366;          /* Default link color */
  --link-hover: #0055aa;
  --team-color: #007bff;          /* Placeholder team color */
  --text-color: #333;
  --background-color: #f8f8f8;

  /* 🖋 Fonts */
  --font-family: 'Lato', sans-serif;
  --heading-color: #222;

    /* 📊 Default Table Variables */
  --table-width: 100%;
  --table-border-style: collapse;
  --table-margin: 1rem 0;
  --table-font-size: 12px;
  
  --table-border-color: #ddd;
  --table-cell-padding: 5px;
  --table-text-align: left;
  
  --table-header-bg: #f0f0f0;
  --table-header-font-weight: 600;
  
  --table-row-alt-bg: #fafafa;
  --table-row-hover-bg: #f1f1f1;

    /* 📂 Overview Table Specific */
  --overview-table-header-bg: #f0f0f0; /* subtle light blue */
  --overview-table-border-color: #ddd;
  --overview-indent-padding: 20px;
  --overview-font-size: 12px;
  --highlight-column-bg: #f5eee0;

    --table-header-font-size: 11px; /* 🔥 header font size variable */
  --table-header-padding: 6px 8px;
  --table-header-text-transform: uppercase; /* can be none */
}

/* 🌐 General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
}

/* 📝 Text Defaults */
p {
  margin-bottom: 1rem;
  color: #444;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  text-decoration: underline;
  color: var(--link-hover);
}

/* 🏷 Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }

/* 🔗 Main Site Menu */
.site-menu {
  background-color: var(--secondary-color);
  text-align: center;
  padding: 10px 0;
}

.site-menu a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.site-menu a:hover {
  color: var(--accent-color);
}

.menu-separator {
  color: #888;
  margin: 0 5px;
}

/* 🏷 Team Submenu */
.team-submenu {
  width: 100%;
  background-color: var(--secondary-color);
  text-align: center;
  padding: 14px 0;
  font-family: var(--font-family);
}

.team-submenu a {
  color: #fff;
  text-decoration: none;
  margin: 0 15px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.team-submenu a:hover {
  background-color: #fff;
  color: var(--team-color);
  transform: scale(1.1);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

.team-submenu a.active {
  background-color: var(--team-color);
  color: #fff;
}

/* 📊 Table Defaults */
table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
}

th, td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
  text-align: var(--table-text-align);
}

th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  text-align: center;
  padding: var(--table-header-padding);
  text-transform: var(--table-header-text-transform);
}

tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* 📜 Footer */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  padding: 10px;
  margin-top: 5px;
}

/* 🖼️ Team Logo Menu */
.team-logo-menu {
  background: #000;
  padding: 5px 0;
  text-align: center;
}

.team-logo-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.team-logo-container a {
  display: inline-block;
  margin: 4px;
}

.team-logo-container img {
  width: 35px;
  height: 35px;
  margin: 0 3px;
  transition: transform 0.2s ease;
}

.team-logo-container img:hover {
  transform: scale(1.1);
}

/* 🌐 Responsive Logos */
@media (max-width: 768px) {
  .team-logo-container img {
    width: 30px;
    height: 30px;
    margin: 2px;
  }
}

@media (max-width: 480px) {
  .team-logo-container img {
    width: 24px;
    height: 24px;
    margin: 1px;
  }
}

/* 🏆 Team Header (ML + AAA Distinction) */
.team-header {
  width: 100%;
  text-align: center;
  background-color: var(--primary-color);
  color: #fff;
  padding: 20px 0;
  font-family: var(--font-family);
}

/* 🏆 ML Team: Logo on Top */
.ml-team {
  margin-bottom: 15px;
}

.ml-logo {
  width: 75px; /* Large ML logo */
  height: auto;
  margin-bottom: 10px;
}

.ml-details {
  text-align: center; /* Center text below logo */
}

.ml-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.ml-meta {
  font-size: 14px;
  color: #ddd;
}

/* 🪄 Divider Between ML and AAA */
.team-divider {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  margin: 15px auto;
  width: 50%;
}

/* 🏆 AAA Team: Logo Left, Text Right */
.aaa-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
}

.aaa-logo {
  width: 35px; /* Smaller AAA logo */
  height: auto;
}

.aaa-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.aaa-name {
  font-size: 14px;
  font-weight: bold;
}

.aaa-meta {
  font-size: 12px;
  margin-top: 2px;
}

/* 🌐 Page Wrapper */
.page-container {
  display: flex;
  justify-content: center;
  background-color: #f2f2f2; /* Light gray for side padding */
  padding: 0; /* No top/bottom padding yet */
}

/* 📄 Content Area */
.page-content {
  width: 80%; /* Content is 80% of viewport width */
  background-color: #fff; /* White content area */
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1); /* subtle content shadow */
  border-left: 1px solid rgba(0, 0, 0, 0.05); /* faint divider line */
  border-right: 1px solid rgba(0, 0, 0, 0.05); /* faint divider line */
  padding: 20px;
}

/* 🦶 Footer Base Styling */
.site-footer {
  background-color: #000; /* Matches team-logo section background */
  color: #fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-family);
  padding: 20px 0;
}

/* 📦 Top Section: Logos + Text */
.footer-top {
  width: 80%; /* Matches content width */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 15px;
}

.footer-logos {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px; /* Space between logos */
  margin-right: 20px;
}

.footer-logo {
  width: 60px;
  height: auto;
}

/* 📄 League Description Text */
.footer-description {
  flex-basis: 50%; /* Take up 50% of the footer width */
  color: #fff; /* Updated to pure white text */
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer-description p { 
  text-align: left;
  color: #aaa;
}

/* 📜 Bottom Section: Disclaimer + Copyright */
.footer-bottom {
  width: 80%;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 10px;
  text-align: center;
}

.footer-disclaimer,
.footer-copyright {
  font-size: 0.75rem;
  color: #aaa;
  margin-bottom: 5px;
}

/* 📂 Overview Table */
.overview-table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--overview-font-size);
  table-layout: fixed;
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.overview-table th,
.overview-table td {
  border: 1px solid var(--overview-table-border-color);
  padding: var(--table-cell-padding);
  text-align: var(--table-text-align);
}

.overview-table th {
  background-color: var(--overview-table-header-bg);
  font-weight: var(--table-header-font-weight);
}

.overview-table th:first-child,
.overview-table td:first-child {
  width: 20%; /* Lock first column to 15% */
  text-align: left; /* Keep level names aligned left */
}

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

/* 🎯 Center headers & cells for columns 2 and beyond */
.overview-table th:nth-child(n+2),
.overview-table td:nth-child(n+2) {
  text-align: center;
}

/* 📂 Indent "DBL Team" & "HBL Team" */
.overview-table tbody tr:nth-child(2) td:first-child,
.overview-table tbody tr:nth-child(3) td:first-child {
  padding-left: var(--overview-indent-padding);
}

/* 🟢 Alternate row color + Hover effect */
.overview-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.overview-table tr:hover {
  background-color: var(--table-row-hover-bg);
}

.overview-table th.overview-table-highlight,
.overview-table td.overview-table-highlight {
  font-weight: 700;
  color: #111; /* Slightly darker text for contrast */
}


/* 🌟 Tooltip System */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  visibility: hidden;
  opacity: 0;
  background-color: #333;
  color: #fff;
  text-align: center;
  font-size: 0.75rem;
  padding: 6px 8px;
  border-radius: 4px;
  position: absolute;
  z-index: 10;
  bottom: 125%; /* show above element */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Tooltip Arrow */
[data-tooltip]::after {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show tooltip on hover/focus */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::before,
[data-tooltip]:focus::after {
  visibility: visible;
  opacity: 1;
}

/* 📂 Roster Tables Container */
.roster-tables-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* space between tables */
  margin: 1rem 0;
  flex-wrap: wrap; /* allows stacking on small screens */
}

/* 🏷 Individual Table Wrappers */
.roster-table-wrapper {
  flex: 1 1 48%; /* Each table takes ~48% width */
  background: #fff;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

/* 📊 Table Headers */
.roster-table thead th {
  background-color: #f0f0f0;
  font-weight: 600;
  text-align: center;
}

/* 🎯 Specific Styling for Roster Table */
.roster-table td:first-child,
.roster-table th:first-child {
  width: 10%;             /* Make first column 10% width */
  text-align: center;     /* Center align the text */
}

.roster-table td:nth-child(3),
.roster-table th:nth-child(3),
.roster-table td:nth-child(4),
.roster-table th:nth-child(4),
.roster-table td:nth-child(5),
.roster-table th:nth-child(5),
.roster-table td:nth-child(6),
.roster-table th:nth-child(6) {
  text-align: center;
}

/* 📑 Contracts Salary Table */
.contracts-salary-table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  table-layout: fixed;
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.contracts-salary-table th,
.contracts-salary-table td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
}

/* 🏷 Horizontal Header Styling */
.contracts-salary-table thead th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  text-align: center;
}

/* 📖 Vertical Header (Column 1) Styling */
.contracts-salary-table tbody th {
  background-color: #f5f5f5;
  font-weight: 600;
  text-align: left;
  width: 20%;
}

/* 📖 Indentation Classes for Column 1 */
.contracts-salary-table th.indent-1 {
  padding-left: 1.5rem; /* ~3 spaces */
}

.contracts-salary-table th.indent-2 {
  padding-left: 3rem;   /* ~6 spaces */
}

/* 💲 Align Data Columns to the Right */
.contracts-salary-table td {
  text-align: right;
}

/* 📏 Equal Width for Data Columns */
.contracts-salary-table th:not(:first-child),
.contracts-salary-table td:not(:first-child) {
  width: calc(80% / 7); /* Remaining 80% divided equally across 7 columns */
}

/* 🎨 Row Alternation and Hover */
.contracts-salary-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.contracts-salary-table tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* 📑 Contracts Team Table */
.contracts-team-table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  table-layout: fixed;
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.contracts-team-table th,
.contracts-team-table td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
}

/* 🏷 Headers */
.contracts-team-table thead th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  text-align: center; /* ✅ Center header text */
  padding: var(--table-header-padding);
  text-transform: var(--table-header-text-transform);
}

/* 📐 Column Widths */
.contracts-team-table th:nth-child(1) {
  width: 5%; /* Position */
}

.contracts-team-table th:nth-child(2) {
  width: 5%; /* Player Name */
}

.contracts-team-table th:nth-child(3) {
  width: 15%; /* Level */
}

.contracts-team-table th:nth-child(4) {
  width: 10%; /* Contract */
}

.contracts-team-table th:nth-child(5) {
  width: 10%; /* Option */
}

.contracts-team-table th:nth-child(n+6) {
  width: calc(55% / 7); /* Split remaining space across 7 years */
}

.contracts-team-table td:nth-child(1) {
  width: 5%; /* Position */
  text-align: center;
}

.contracts-team-table td:nth-child(2) {
  width: 5%; /* Player Name */
  text-align: center; /* Left align player names */
}

.contracts-team-table td:nth-child(3) {
  width: 15%; /* Level */
  text-align: left;
}

.contracts-team-table td:nth-child(4) {
  width: 10%; /* Contract */
  text-align: left;
}

.contracts-team-table td:nth-child(5) {
  width: 10%; /* Option */
  text-align: left;
}

.contracts-team-table td:nth-child(n+6) {
  width: calc(55% / 7); /* Split remaining space across 7 years */
  text-align: right; /* Right-align salary numbers */
}

/* 🎨 Alternate Row Colors + Hover */
.contracts-team-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.contracts-team-table tr:hover {
  background-color: var(--table-row-hover-bg);
}


.table-header-rect {
  width: 20%;                       /* fixed width */
  background-color: var(--team-color, #2a3f54); /* fallback team color */
  color: #fff;                         /* white text for contrast */
  font-weight: bold;
  padding: 6px 8px;
  font-size: 14px;
  text-align: left;
  margin: 0;
  border-radius: 4px 4px 0 0;          /* rounded top corners if desired */
}

.retention-overview-table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
  table-layout: fixed;
}

.retention-overview-table th { 
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}


/* Second column: Center align */
.retention-overview-table th:nth-child(2),
.retention-overview-table td:nth-child(2) {
  text-align: center;
  width: 10%; /* Total column */
}

.retention-overview-table td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
  text-align: right; /* Align numeric data to the right */
}

.retention-overview-table th:first-child,
.retention-overview-table td:first-child {
  text-align: left; /* Align "Level" and "Organization" text left */
  width: 20%;       /* First column takes 20% */
}

.retention-overview-table th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
}

.retention-overview-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.retention-overview-table tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* 📑 Retention Team Table */
.retention-team-table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  table-layout: fixed;
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.retention-team-table th,
.retention-team-table td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
}

/* 🏷 Headers (inherits template defaults) */
.retention-team-table thead th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  text-align: center;
  padding: var(--table-header-padding);
  text-transform: var(--table-header-text-transform);
}

/* 📐 Column Widths */
.retention-team-table th:nth-child(1) {
  width: 15%; /* Player Name */
}

.retention-team-table th:nth-child(2) {
  width: 15%; /* Traded To */
}

.retention-team-table th:nth-child(3) {
  width: 10%; /* Salary */
}

.retention-team-table th:nth-child(n+4) {
  width: calc(60% / 7); /* Split remaining space for Years */
}

.retention-team-table td:nth-child(1) {
  width: 15%; /* Player Name */
  text-align: left;
}

.retention-team-table td:nth-child(2) {
  width: 15%; /* Traded To */
  text-align: left;
}

.retention-team-table td:nth-child(3) {
  width: 10%; /* Salary */
  text-align: right;
}

.retention-team-table td:nth-child(n+4) {
  width: calc(60% / 7); /* Split remaining space for Years */
  text-align: right;
}

/* 🎨 Alternate Row Colors + Hover */
.retention-team-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.retention-team-table tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* 📋 Picks Overview Table */
.picks-overview {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  table-layout: fixed;
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.picks-overview th,
.picks-overview td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
  text-align: center; /* Default alignment for most columns */
}

.picks-overview thead th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  text-align: center;
  padding: var(--table-header-padding);
  text-transform: var(--table-header-text-transform);
}

/* 📏 Column Adjustments */
.picks-overview td:nth-child(1) {
  width: 12%; /* Draft Year */
}

.picks-overview td:nth-child(8) {
  text-align: right; /* Right-align Hold Amount */
  width: 15%;
}

.picks-overview th:nth-child(2),
.picks-overview td:nth-child(2),
.picks-overview th:nth-child(3),
.picks-overview td:nth-child(3),
.picks-overview th:nth-child(4),
.picks-overview td:nth-child(4),
.picks-overview th:nth-child(5),
.picks-overview td:nth-child(5),
.picks-overview th:nth-child(6),
.picks-overview td:nth-child(6),
.picks-overview th:nth-child(7),
.picks-overview td:nth-child(7) {
  width: auto;
  text-align: center;
}

/* 🟢 Alternate row colors + hover */
.picks-overview tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.picks-overview tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* 📋 Picks Team Table */
.picks-team-table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  table-layout: fixed;
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.picks-team-table th,
.picks-team-table td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
}

.picks-team-table thead th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  text-align: center; /* Center all headers by default */
  padding: var(--table-header-padding);
  text-transform: var(--table-header-text-transform);
}

/* 🏷 Column Alignments */
.picks-team-table th:nth-child(1),
.picks-team-table td:nth-child(1), /* Year */
.picks-team-table th:nth-child(2),
.picks-team-table td:nth-child(2), /* Round */
.picks-team-table th:nth-child(3),
.picks-team-table td:nth-child(3)  /* Pick # */
{
  text-align: center;
  width: 6%;
}

.picks-team-table th:nth-child(4),
.picks-team-table td:nth-child(4) /* Team */
{
  text-align: left;
  width: 15%;
}

.picks-team-table th:nth-child(n+5),
.picks-team-table td:nth-child(n+5) /* Year 1 - Year 10 */
{
  text-align: right; /* Align monetary values to the right */
  width: auto;
}

/* 🟢 Alternate row color + Hover effect */
.picks-team-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.picks-team-table tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* 📂 Offseason Overview Table */
.offseason-overview {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  table-layout: fixed;
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.offseason-overview th,
.offseason-overview td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
}

.offseason-overview thead th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  text-align: center;
  padding: var(--table-header-padding);
  text-transform: var(--table-header-text-transform);
}

/* 📖 Vertical Headers */
.offseason-overview tbody th {
  background-color: #f5f5f5;
  font-weight: 600;
  text-align: left;
  width: 15%;
}

/* 🏷 Center the Position Columns */
.offseason-overview td {
  text-align: center;
}

/* 🟢 Row Alternation + Hover */
.offseason-overview tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.offseason-overview tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* 📂 Offseason Extensions Table */
.offseason-extensions-table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.offseason-extensions-table th,
.offseason-extensions-table td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
}

/* 🏷 Column Widths & Alignment */
.offseason-extensions-table th:first-child,
.offseason-extensions-table td:first-child {
  width: 8%; /* Position */
  text-align: center;
}

.offseason-extensions-table th:nth-child(2),
.offseason-extensions-table td:nth-child(2) {
  width: 15%; /* Player Name */
  text-align: left;
}

.offseason-extensions-table th:nth-child(3),
.offseason-extensions-table td:nth-child(3) {
  width: 5%; /* Contract Type */
  text-align: center;
}

.offseason-extensions-table th:nth-child(4),
.offseason-extensions-table td:nth-child(4) {
  width: 10%; /* Current Salary */
  text-align: left;
}

.offseason-extensions-table th:nth-child(n+5),
.offseason-extensions-table td:nth-child(n+5) {
  text-align: right; /* Salary and Demands */
}

/* 🏷 Table Header Styling */
.offseason-extensions-table thead th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  padding: var(--table-header-padding);
  text-transform: var(--table-header-text-transform);
  text-align: center; /* Center all headers by default */
}

/* 🟢 Alternate Row Coloring */
.offseason-extensions-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.offseason-extensions-table tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* 📂 Offseason RFA Table */
.offseason-rfa-table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.offseason-rfa-table th,
.offseason-rfa-table td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
}

/* 🏷 Column Widths & Alignment */
.offseason-rfa-table th:first-child,
.offseason-rfa-table td:first-child {
  width: 8%; /* Position */
  text-align: center;
}

.offseason-rfa-table th:nth-child(2),
.offseason-rfa-table td:nth-child(2) {
  width: 15%; /* Player Name */
  text-align: left;
}

.offseason-rfa-table th:nth-child(3),
.offseason-rfa-table td:nth-child(3) {
  width: 8%; /* Contract Type */
  text-align: center;
}

.offseason-rfa-table th:nth-child(n+4),
.offseason-rfa-table td:nth-child(n+4) {
  text-align: right; /* Demands */
}

/* 🏷 Table Header Styling */
.offseason-rfa-table thead th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  padding: var(--table-header-padding);
  text-transform: var(--table-header-text-transform);
  text-align: center; /* Center all headers */
}

/* 🟢 Alternate Row Coloring */
.offseason-rfa-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.offseason-rfa-table tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* 🌐 Depth Chart Grid Section */
.depth-chart-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2%; /* Space between tables */
  margin: 2rem 0;
}

/* 🌐 Depth Chart Grid */
.depth-chart-row {
  display: flex;
  justify-content: flex-start;
  gap: 2%; /* Space between tables */
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* 📋 Table Containers */
.depth-chart-table-wrapper {
  width: 23%; /* Each table = 24% width */
}

.depth-chart-table-placeholder {
  width: 23%; /* Placeholder to keep alignment */
}

/* 🏷 Position Header */
.position-header {
  background-color: var(--secondary-color);
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 5px 0;
  margin-bottom: 5px;
  border-radius: 3px;
  font-size: 0.9rem;
}

/* 📊 Depth Chart Table */
.depth-chart-table {
  width: 100%;
  border-collapse: var(--table-border-style);
  font-size: var(--table-font-size);
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
  table-layout: fixed;
}

.depth-chart-table th,
.depth-chart-table td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
}

/* 🎯 Column Sizes */
.depth-chart-table th:first-child,
.depth-chart-table td:first-child {
  width: 10%; /* # column */
  text-align: center;
}

.depth-chart-table th:nth-child(2),
.depth-chart-table td:nth-child(2) {
  width: 45%; /* Name column */
  text-align: left;
}

.depth-chart-table th:nth-child(3),
.depth-chart-table td:nth-child(3),
.depth-chart-table th:nth-child(4),
.depth-chart-table td:nth-child(4),
.depth-chart-table th:nth-child(5),
.depth-chart-table td:nth-child(5) {
  width: 15%; /* L, B, T columns */
  text-align: center;
}

/* 📱 Responsive: Stack tables vertically */
@media (max-width: 1024px) {
  .depth-chart-row {
    flex-direction: column;
  }
  .depth-chart-table-wrapper,
  .depth-chart-table-placeholder {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* 📊 Picks Overview Cost Table */
.picks-overview-cost-table {
  width: var(--table-width);
  border-collapse: var(--table-border-style);
  margin: var(--table-margin);
  font-size: var(--table-font-size);
  background-color: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}

.picks-overview-cost-table th,
.picks-overview-cost-table td {
  border: 1px solid var(--table-border-color);
  padding: var(--table-cell-padding);
  text-align: center;
}

.picks-overview-cost-table th {
  background-color: var(--table-header-bg);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  text-transform: var(--table-header-text-transform);
}

.picks-overview-cost-table td:last-child {
  font-weight: 600; /* Highlight total cost column */
  text-align: right;
}

.picks-overview-cost-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.picks-overview-cost-table tr:hover {
  background-color: var(--table-row-hover-bg);
}

/* Center the resource grid on the page */
.resource-grid-5x5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* space between tiles */
  max-width: 1000px; /* optional cap for wide screens */
  margin: 0 auto; /* center horizontally */
}

#resources-page {
  padding: 20px;
  max-width: 1300px;
  margin: 0 auto;
}

.resource-section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 6px;
}

.resource-section h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.section-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 20px;
  justify-content: start; /* aligns grid items left if extra space exists */
}

.resource-card {
  width: 175px;
  height: 175px;
  text-align: center;
  text-decoration: none;
  color: #000;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.resource-card img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-bottom: 8px;
}

.resource-card span {
  font-size: 14px;
  font-weight: 600;
}

.resource-section {
  padding: 20px;
}


/* 📱 Responsive Tables: Allow horizontal scrolling */
@media (max-width: 768px) {
  table,
  .overview-table,
  .contracts-team-table,
  .contracts-salary-table,
  .picks-team-table,
  .picks-overview,
  .offseason-overview,
  .offseason-extensions-table,
  .offseason-rfa-table,
  .retention-team-table,
  .retention-overview-table,
  .depth-chart-table,
  .picks-overview-cost-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table thead,
  table tbody,
  table th,
  table td,
  table tr {
    white-space: nowrap;
  }
}

/* Style Font Awesome icons used in the Contract Builder menu */
#contract-breakdown-table th button i {
  color: #000;               /* Change this to match your theme */
  font-size: 14px;
  transition: color 0.2s ease;
}

/* Button hover effect */
#contract-breakdown-table th button:hover i {
  color: #007bff;            /* Highlight color on hover */
}

/* Ensure icon buttons are spaced nicely */
#contract-breakdown-table th button {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
}

#position-menu {
  margin: 20px 0;
  font-weight: bold;
  text-align: center;
}
.position-link {
  cursor: pointer;
  color: #007bff;
  margin: 0 5px;
}
.position-link:hover {
  text-decoration: underline;
}

#player-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 10px;
}

#player-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 10px;
}

#player-table th,
#player-table td {
  border: 1px solid #ccc;
  padding: 4px 6px;
  font-size: 10px;
  text-align: center;     /* ✅ Center all cells by default */
  word-wrap: break-word;
}

#player-table th {
  background-color: #f0f0f0;
  font-size: 8px;          /* ✅ Header font size */
  font-weight: bold;
  text-align: center;      /* ✅ Header alignment */
}

#player-table th:first-child,
#player-table td:first-child {
  text-align: center;
  width: 125px;             /* ✅ Player column */
}

#player-table td:first-child { 
  text-align: left; 
}

#player-table th:nth-child(2),
#player-table td:nth-child(2) {
  width: 75px;             /* ✅ Overall Score */
}

#player-table th:nth-child(3),
#player-table td:nth-child(3) {
  width: 75px;             /* ✅ Potential Score */
}

/* ✅ All other columns will auto-distribute due to table-layout: fixed */

.page-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.page-logo img {
  width: 250px;
  height: 250px;
  object-fit: contain;
}

th.sortable {
  background-color: #e8e8e8;
  text-decoration: underline;
}

#year-menu {
  text-align: center;
  margin: 20px 0;
}

.year-link {
  cursor: pointer;
  font-weight: bold;
  color: #007bff;
}

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

#salary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#salary-table th, #salary-table td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  font-size: 12px;
  text-align: center;
}

.contract-view-link {
  cursor: pointer;
  font-weight: bold;
  color: #333;
  padding: 0 6px;
}

.contract-view-link.active {
  color: #007bff;
  text-decoration: underline;
}

/* Center all header cells */
#contracts-table th {
  text-align: center;
  padding: 5px;
}

/* Center all data cells except first column */
#contracts-table td {
  text-align: center;
  padding: 5px;
}

/* Left-align first column (team name) */
#contracts-table td:first-child {
  text-align: left;
  padding-left: 10px;
}

/* Equal width for all columns except the first */
#contracts-table th:not(:first-child),
#contracts-table td:not(:first-child) {
  width: 80px; 
}

.roster-view-link {
  cursor: pointer;
  font-weight: bold;
  color: #333;
  padding: 0 6px;
}

.roster-view-link.active {
  color: #007bff;
  text-decoration: underline;
}

#roster-table th {
  text-align: center;
  padding: 5px;
}

#roster-table td {
  text-align: center;
  padding: 5px;
}

#roster-table td:first-child {
  text-align: left;
  padding-left: 10px;
}

#roster-table th:not(:first-child),
#roster-table td:not(:first-child) {
  width: 60px;
}