/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set base font and background */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f5f7;
  color: #2f3542;
  min-height: 100vh;   /* allow scrolling beyond one screen */
}

nav.menu {
  background-color: #2f3542;
  padding: 20px;
  text-align: right;
}

/* Sidebar styles */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 230px;
  height: 100vh;
  background-color: #2f3542;
  color: #f4f5f7;
  border-top-right-radius: 20px;
  display: flex;
  flex-direction: column;
  transition: left 0.3s ease;
}

.logo img { max-width: 100%; height: auto; }

/* Menu styles */
.sidebar .menu {
  display: flex;
  flex-direction: column;
  text-align: right; /* Aligns text to the right */
  gap: 15px;
}

.sidebar .menu a {
  color: #f4f5f7;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.sidebar .menu a:hover {
  color: #a4b0be;
}

/* when collapsed, move completely off-screen */
.sidebar.collapsed {
  left: -230px;
}

.toggle-btn {
  position: absolute;
  top: 220px;          /* keep your middle placement */
  right: 0px;        /* slightly outside sidebar edge */
  background-color: #3b4251;
  color: #f4f5f7;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  width: 28px;
  height: 28px;
  z-index: 1000;
  transition: right 0.3s ease, transform 0.3s ease;
}

/* Collapsed sidebar */
.sidebar.collapsed {
  left: -230px;
}

/* Shift mainContent when collapsed */
.sidebar.collapsed ~ .mainContent {
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

.sidebar.collapsed .toggle-btn {
  right: -38px;
  transform: rotate(0deg); /* keep it pointing left always */
}

/* Main content area */
.mainContent {
  flex: 1;
  background-color: #f4f5f7;
  margin-left: 230px;  /* same as sidebar width */
  overflow: visible;    /* let content flow */
  min-height: 100vh;    /* full height but can grow */
  padding: 0;           /* don’t reset spacing */
  padding-top: 0;
}

.important-banner{
    margin-left: 15px;
  }
    
.mainContent table:first-of-type {
  margin-top: 0 !important;
}

.sidebar.collapsed + .mainContent {
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

.basicTable {
  width: auto; 
  border-spacing: 0;
  border-radius: 20px; /* same as sidebar */
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.85rem;
  padding: 6px 8px;
  border-collapse: collapse;   /* not "separate" */
  background-color: #3b4251;   /* your table background */
  white-space: nowrap;  
  table-layout: auto;
  margin: 0 0 15px 15px;   /* apply gap on all sides */
  border-spacing: 0;
  border-collapse: collapse;

}
.basicTable a {
  color: #f4f5f7;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.basicTable a:hover {
  color: #a4b0be;
}

.basicTable thead {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.basicTable img {
  height: 20px;
}

/* Header styling */
.basicTable thead th {
  background-color: #2f3542;
  color: #f1f2f6;
  font-weight: bold;
  text-align: center;
  padding: 6px 10px;       /* ↓ reduced vertical padding */
  line-height: 1.2;        /* ↓ tighter text box height */
  font-size: 0.95em;       /* optional: slightly smaller text */
  font-size: 0.95em;
  text-transform: uppercase;    /* ✅ all caps for clarity */
  letter-spacing: 1px;        /* ✅ subtle extra spacing between letters */
}

/* Sub Header styling */
 .basicTable tbody tr th{
  background-color: #57606f;
  color: #f1f2f6;
  padding: 4px 8px;      /* ↓ tighter vertical spacing */
  line-height: 1.2;      /* compact but still readable */
  text-transform: uppercase;    /* ✅ all caps for clarity */
  letter-spacing: 1px;        /* ✅ subtle extra spacing between letters */
 }

 .basicTable tbody td table th {
  background-color: inherit !important; /* or use the mini table’s own color */
}

.basicTable tbody td{
  background-color: #57606f;
  color: #f1f2f6;
  text-align: center;
  vertical-align: top;   /* keeps alignment tidy */
  padding: 4px 8px;      /* ↓ tighter vertical spacing */
  line-height: 1.2;      /* compact but still readable */
 } 

/* Modif pour tableau Transactions */
/* Dates */
.trade-date {
  background: linear-gradient(90deg, #2f3542, #2f3542);
  color: #fff;
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  padding: 4px 0;
  margin: 12px 0 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Teams */
.trade-teams {
  display: flex;
  justify-content: space-between;
  color: #f4f5f7;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

/* Player list */
.trade-players {
  color: #d8dce3;
  font-size: 1em;
  padding: 8px 12px; 
  line-height: 1.3;     /* space between lines of text */  
}

/* Optional subtle divider */
.trade-block {
  background-color: #57606f;
  padding: 8px 12px;
  border-radius: 10px;
  /*margin-bottom: 10px;*/
  transition: transform 0.2s ease;
  margin: 10px;
}

/* Trade header line (date + opponent, or both teams) */
.trade-teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2f3542;   /* same as table header */
  color: #f1f2f6;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.trade-teams img {
  height: 22px;
  width: 22px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}

#leagueTradesTable th {
    text-align: center !important;
    padding: 6px 6px;
}

#rondeTable th:nth-child(4),
#rondeTable td:nth-child(4) {
  text-align: left;
}

#mainPoolerTable th:nth-child(2),
#mainPoolerTable td:nth-child(2),
#mainPoolerTable th:nth-child(8),
#mainPoolerTable td:nth-child(8) {
  text-align: left;
}

#rondeTable {
  box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.2);  /* right + down, darker */
  transition: box-shadow 0.2s ease-in-out;
}

#draftTable thead th {
  text-align: left;
  /*text-indent: 25px;*/
}

#standingsTable th:nth-child(2) {
  text-align: left !important;
}
#standingsTable tbody tr td:nth-child(2) {
  text-align: left !important;
}

#debutTable thead th {
  text-align: left !important;
}

#debutTable tbody td {
  text-align: left !important;
}

/*Section page teams*/
.overview-table,
.team-page-top,
.plf-table,
.team-page-table {
  background-color: #3b4251;
  border-radius: 12px;
}

/* ===== Mini-table inside team header ===== */
.mini-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8rem;
}

.mini-table td {
  padding: 0.2rem 0.5rem;
  text-align: left;
}

#teamHeader,
#playerSections,
.team-page-table { margin-bottom: 0.6rem; }

.team-left {
  flex: 3 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-right {
  flex: 1 1 300px;
  min-width: 280px;
}

#teamHeader .logo-cell img { max-height: 100px; width: auto; }

.team-layout {
  display: grid;
  grid-template-columns: 78% 22%;
  align-items: start;
  width: 100%;
  overflow-x: auto;      /* ✅ allow horizontal scroll */
  width: max-content;    /* ✅ prevents columns from shrinking too much */
}


#forwardsTable tbody tr td:nth-child(1),
#defenseTable tbody tr td:nth-child(1),
#goalersTable tbody tr td:nth-child(1),
#picksArchives tbody tr td:nth-child(1),
#archive tbody tr td:nth-child(1){
  text-align: left !important;
}

#playerSections,
#playerSections th,
#playerSections td {
  padding-left: 4px;
  padding-right: 4px;
}

#playerSections {
  border-spacing: 0;     /* removes space between cells if not collapsed */
  border-collapse: collapse; /* ensures cells share borders */
}

.playerSectionsWrapper {
  display: flex;
  flex-direction: row; /* <— make sure it's row, not row-reverse */
  width: 100%;

  gap: 10px;
}

#playerSections {
flex: 1;           /* allow it to scale freely */
  min-width: 718px;  /* optional, lower if you want it tighter */
}

.sideTables {
  flex: 1;          /* takes remaining space */
  min-width: 250px; /* sets a reasonable min width for smaller side tables */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#playerSections td {
  text-align: center;
  vertical-align: top; /* or middle, depending on your look */
}

#playerSections td > table {
  margin-left: auto;
  margin-right: auto;
}

#playerSections td > table.basicTable td {
  padding-left: 10px;
  padding-right: 10px;
}

/* === Joueurs footer controls === */
.footer-controls {
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

.footer-controls button {
  background-color: #3b4251;
  color: #f1f2f6;
  border: 1px solid #004080;
  border-radius: 6px;
  cursor: pointer;
}

.footer-controls button:hover {
  background-color: #3b4251;
}

.footer-controls .active {
  background-color: #3b4251;
}

/* === Filters bar (responsive) === */
#filtersBar {
  background-color: #2f3542;
  border-bottom: 2px solid #004080;
}
/* === Filters bar (horizontal scroll version) === */
#filtersBar {
  background-color: #2f3542;
  border-bottom: 2px solid #004080;
}

.filters-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f1f2f6;
  font-size: 0.9rem;
  overflow-x: auto;             /* ✅ allow horizontal scroll */
  white-space: nowrap;          /* ✅ prevent wrapping */
  scrollbar-width: thin;        /* Firefox: thinner scrollbar */
  scrollbar-color: #004080 #2f3542;
}

.filters-container::-webkit-scrollbar {
  height: 6px;                  /* ✅ thinner scrollbar for Chrome */
}
.filters-container::-webkit-scrollbar-track {
  background: #2f3542;
}
.filters-container::-webkit-scrollbar-thumb {
  background-color: #004080;
  border-radius: 4px;
}

.filters-left {
  display: inline-flex;          /* ✅ keep in one line */
  align-items: center;
  gap: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}

.filters-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.filters-right input[type="text"] {
  background-color: #3b4251;
  border: 1px solid #004080;
  border-radius: 6px;
  color: #f1f2f6;
  padding: 4px 8px;
  font-size: 0.9rem;
  width: 180px;
  min-width: 140px;
}

.filters-right input[type="text"]:focus {
  outline: none;
  border-color: #ffd700;
}

.filters-container {
  justify-content: space-between;
  gap: 40px; /* adds visual breathing space between Libre and Recherche */
}

/* Table footer background + centered text */
#joueursOptions tfoot td,
#listJoueurs tfoot td {
  background-color: #3b4251;
  color: #f1f2f6;
  text-align: center;
}

/* Flex layout only inside footer content, not on tfoot */
.footer-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
/* Ensure the cells respect fixed width */
#joueursOptions th,
#joueursOptions td,
#listJoueurs th,
#listJoueurs td {
  word-wrap: break-word;      /* keeps text from expanding cells */
  overflow: hidden;
}

/* Tighten footer vertical spacing precisely */
#joueursOptions tfoot td,
#listJoueurs tfoot td {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;          /* neutralize extra vertical spacing from text */
  height: 1px;             /* removes default cell height reserve */
}

.footer-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.85rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1;
  height: auto;
}

.tables-wrapper {
  display: flex;
  flex-wrap: nowrap;       /* ❌ no wrapping */
  overflow-x: auto;        /* ✅ horizontal scroll when too wide */
  overflow-y: hidden;
  gap: 1rem;
  align-items: flex-start; /* keeps them top-aligned */
  padding-bottom: 0.5rem;  /* a bit of space under scrollbar */
}

/* Optional: make sure tables don't shrink */
.tables-wrapper table {
  flex: 0 0 auto;
}

.tables-wrapper table {
  align-self: flex-start !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

a[href^="#"][onclick^="loadTeams"] img:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
  transition: 0.2s;
}