/*
  styles.css
  Main stylesheet for Frisbee Stats web app.
  Handles layout, navigation, and component appearance.
*/

/* --- Navbar and Topbar ---
   Styles for the fixed sidebar navigation and topbar.
   Sidebar is on the left, topbar is at the top.
*/
nav,
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 125px;
  height: 100vh;
  background-color: #ccffcc;
  padding-top: 20px;
  box-sizing: border-box;
}

nav ul,
#navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li a,
#navbar li a {
  display: block;
  padding: 12px 16px;
  color: #000;
  text-decoration: none;
}

nav li a:hover,
#navbar li a:hover {
  background-color: #b3e6b3;
}

#topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #77A479;
  display: flex;
  align-items: center;
  padding-left: 16px;
  box-sizing: border-box;
  font-size: 1.5em;
  font-weight: bold;
  z-index: 1000;
}

#navbar {
  top: 60px;
  height: calc(100vh - 60px);
}

body {
  margin-left: 150px;
  margin-top: 75px;
  background-color: #f0faf0; 
}

/* --- Dropdown Menus ---
   Styles for dropdown menus used throughout the site, including
   algorithm selectors and team search dropdowns.
   Dropdowns are white by default, green on hover.
*/
.dropdown {
  position: relative;
  display: inline-block;       
  cursor: pointer;
  background: #f9f9f9;         
  padding: 6px 12px;
  border-radius: 4px;
  user-select: none;
  align-self: flex-start;
}

.dropdown > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  background: #fff; 
  list-style: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border-radius: 4px;
  z-index: 10;
}

.dropdown:hover > ul {
  display: block;
}

.dropdown li {
  padding: 6px 12px;
}

.dropdown li:hover {
  background: #b3e6b3;
}

/* --- MTIBTYT Page Layout ---
   Styles for the "My Team Is Better Than Your Team" comparison page,
   including the team selection panels and chain display.
*/
.panel-container {
  margin-left: 140px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

#MTIBTYT-container {           
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-left: 0;           
  margin-left: 0;            
}

#MTIBTYT-container > #team1,
#MTIBTYT-container > #team2 {
  width: 50%;
  height: 55%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background: #f9f9f9;
  overflow: visible;
}

#team1_list, #team2_list {
  max-height: 200px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}
#team1_list li, #team2_list li {
  cursor: pointer;
}


#MTIBTYT-container > #chain {
  width: 73%;
  height: 33%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background: #f9f9f9;
  overflow: auto;
  border: 2px solid #ccc;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;              
  background-color: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#chain ul {
  display: flex;       
  list-style: none;    
  margin: 0;
  padding: 0;
  gap: 1em;            
}

#chain_button {
  display: block;
  margin: 12px 0;
  padding: 8px 16px;
  background-color: #ccffcc;
  border: 1px solid #aaa;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
}

#chain_button:hover {
  background-color: #b3e6b3;
}

/* --- Teams Page Layout ---
   Styles for the teams listing and search on teams.html.
*/
#teams-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100vh - 75px);
}

#teams-container > #page-title {
  width: 100%;
  height: 12%;
  box-sizing: border-box;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
}

#teams-container > #games,
#teams-container > #rank {
  width: 50%;
  height: auto;           /* let content define height */
  box-sizing: border-box;
  border: 1px solid #ccc;
  background: #f9f9f9;
  overflow: auto;
  display: flex;
}

/* --- Rank Panel ---
   Styles for the ranking panel and chart on teampage.html.
*/
#rank {
  display: flex;           
  flex-direction: column;  
}

#rank img {
  max-width: 100%;
  height: auto;
}

/* --- Leaderboard Page Layout ---
   Styles for the leaderboard display and algorithm dropdown.
*/
#leaderboard-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-left: 150px;
  margin-top: 0;              
}

/* --- Box and Table Styling ---
   Styles for the main content boxes and tables.
*/
.leaderboard-box {
  width: 65%;                
  max-width: 500px;           
  border: 2px solid #ccc;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;              
  background-color: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.leaderboard-box table {
  width: 100%;
}
.leaderboard-box th,
.leaderboard-box td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.leaderboard-box th {
  background-color: #e6ffe6;
  font-weight: bold;
}

/* --- Leaderboard Dropdown ---
   Styles for the algorithm dropdown on leaderboard.html.
*/
#leaderboard-dropdown {
  display: flex;
  width: 35%;
  height: 10%;
  align-items: center;
  border: 2px solid #ccc;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;              
  background-color: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#leaderboard-dropdown ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: #fff; 
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border-radius: 4px;
  z-index: 10;
}
#leaderboard-dropdown.open ul {
  display: block !important;
}
#leaderboard-dropdown:hover ul {
  display: block;
}
#leaderboard-dropdown li {
  padding: 6px 12px;
}
#leaderboard-dropdown li:hover {
  background: #b3e6b3;
}

#info-paragraph {
  display: block;                
  width: 57%;
  text-align: left;
  border: 2px solid #ccc;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  background-color: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 

/* --- Chart Container ---
   Styles for the Plotly chart container.
*/
.chart-container {
  width: 100%;
  max-width: 800px;  
  height: 300px;     
  margin: 20px auto;
}

#chart {
  width: 100%;
  height: 100%;
}

/* --- General Alignment and Spacing ---
   General alignment, and spacing styles.
*/
body,
#teams-container,
#navbar,
#topbar,
.leaderboard-title,
h2,
h3,
p,
#rank,
#games,
#page-title,
.chart-container {
  text-align: left;
}

.leaderboard-box,
#rank,
#games,
#chain,
#team1,
#team2,
.chart-container {
  padding: 24px;
  box-sizing: border-box;
}

#teams-container,
#leaderboard-container {
  margin-left: 0;
  margin-right: 0;
}

#navbar ul,
.dropdown ul {
  text-align: left;
  padding-left: 0;
}

ul {
  padding-left: 0;
}

.leaderboard-box,
#rank,
#games,
#chain,
#team1,
#team2,
.chart-container {
  margin-bottom: 20px;
}

#MTIBTYT-container .leaderboard-box {
  margin-left: 0;
  margin-right: 20px; 
  align-self: flex-start;
}

/* --- Home Page Layout ---
   Styles for the home page flex layout and images.
*/
#home-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  min-height: 60vh;
  margin-bottom: 40px;
}

#home-main {
  flex: 2 1 0;
  min-width: 300px;
  max-width: 700px;
}

#home-image {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-top: 60px;
}

#home-image img {
  max-width: 350px;
  height: auto;
  display: block;
}

/* --- Team Search Dropdown ---
   Styles for the team search dropdowns on MTIBTYT and other pages.
*/
.team-search-dropdown {
  position: relative;
  width: 100%;
}

.team-list-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-list-dropdown li {
  padding: 8px 12px;
  cursor: pointer;
}

.team-list-dropdown li:hover {
  background: #b3e6b3;
}

/* Show dropdown when parent has .open class */
.team-search-dropdown.open .team-list-dropdown {
  display: block !important;
}

/* --- Algorithm Dropdown Styling ---
   Styles for the algorithm dropdown button and list.
*/
#algorithm-button {
  background: #ccffcc;
  border: 1px solid #aaa;
  border-radius: 6px;
  padding: 8px 24px 8px 12px;
  font-size: 1em;
  cursor: pointer;
  position: relative;
}

#algorithm-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 180px;
  z-index: 100;
}

#algorithm-dropdown li {
  padding: 8px 12px;
  cursor: pointer;
}

#algorithm-dropdown li:hover {
  background: #b3e6b3;
}

#navbar .nav-item:hover,
#navbar .nav-item.active {
  background-color: #77A479;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #000;
  padding: 12px 16px;
  font-size: 14px;
}
 
.nav-item:hover,
.nav-item.active {
  background-color: #77A479;
}
 
.nav-icon {
  width: 78px;
  height: 78px;
  margin-bottom: 6px;
 }
 
.topbar-logo {
  height: 65px;
  width: 120px;
  margin-left: 0px;
 }

#teams_search {
  width: 150px;    /* Set your desired width */
  margin-bottom: 12px;
  padding: 6px 10px;
}

#global-search-bar-container {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 32px;
  height: 100%;
  z-index: 1100;
}

.global-search-dropdown {
  position: relative;
  width: 220px;
  z-index: 1200;
}

.global-search-dropdown input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #bbb;
  font-size: 1em;
  box-sizing: border-box;
  background: #fff;
}

.global-team-list-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: #fff; 
  border: 1px solid #ccc;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-team-list-dropdown li {
  padding: 8px 12px;
  cursor: pointer;
}

.global-team-list-dropdown li:hover {
  background: #b3e6b3;
}

.global-search-dropdown.open .global-team-list-dropdown {
  display: block !important;
}