@font-face {
    font-family: 'PremierLeagueW01-Bold';
    src: url('../fonts/PremierLeagueW01-Bold.eot');
    src: url('../fonts/PremierLeagueW01-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/PremierLeagueW01-Bold.woff') format('woff'),
         url('../fonts/PremierLeagueW01-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'PremierLeagueW01-BoldItalic';
    src: url('../fonts/PremierLeagueW01-BoldItalic.eot');
    src: url('../fonts/PremierLeagueW01-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/PremierLeagueW01-BoldItalic.woff') format('woff'),
         url('../fonts/PremierLeagueW01-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

body {
    background-color: #ededed; /* Set the background color to white */
    background-image: url('../images/Background.png'); /* Add background image */
    background-size: cover; /* Ensure the image covers the entire width */
    background-position: center top; /* Start the image lower */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-attachment: fixed; /* Fix the background image */
    margin: 0;
    font-family: 'PremierLeagueW01-Bold', Arial, sans-serif; /* Use Premier League font */
    color: #000120; /* Set text color to white */
}


.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-image: url('../images/primary-bg.svg'), url('../images/primary-graphic.svg');
    background-size: cover, cover; /* Ensure both images cover the area */
    background-position: center, center; /* Center both images */
    background-repeat: no-repeat, no-repeat;
    position: relative; /* Ensure positioning context for overlay */
    max-width: 1200px; /* Limit the width of the header */
    margin: 0 auto; /* Center the header content */
}

.logo-container {
    margin-right: -1em; /* Adjust the spacing using em units */
    margin-left: 1em; /* Move the logo further to the left */
    display: inline-block;
}

.logo {
    height: 4em; /* Further decreased logo height */
    vertical-align: middle;
}

.main-header {
    width: 100%;
    position: fixed; /* Keep the navigation bar fixed at the top */
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure it is above other content */
    animation: slideDown 1.5s ease-out forwards; /* Apply slide down animation */
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
        box-shadow: none; /* No shadow at the start */
        background-position-y: -50px; /* Start background lower */
    }
    to {
        transform: translateY(0);
        opacity: 1;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3); /* Full shadow at the end */
        background-position-y: 0; /* End background at normal position */
    }
}

.main-navigation {
    display: flex;
    align-items: center; /* Vertically align the logo and navigation items */
    justify-content: space-between; /* Space between logo and nav items */
    padding: 0 20px; /* Add padding to the sides */
    height: 85px; /* Reduced the height of the navigation bar */
    background-image: url('../images/primary-graphic.svg'), url('../images/primary-bg.svg'); /* Ensure graphic is on top of primary */
    background-size: cover, cover; /* Ensure both images cover the area */
    background-position: center, center; /* Center both images */
    background-repeat: no-repeat, no-repeat;
    animation: slideDown 0.5s ease-out forwards; /* Apply slide down animation */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.nav-list {
    list-style: none; /* Remove default list style */
    display: flex;
    justify-content: center; /* Center nav items horizontally */
    align-items: center; /* Center nav items vertically */
    gap: 20px;
    margin: 0 auto; /* Center the nav list within the available space */
    padding: 0;
    flex-grow: 1; /* Allow nav items to take up remaining space */
}

.nav-link {
    padding: 10px 20px; /* Add padding to create space around each nav item */
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    transition: transform 0.2s ease-out, color 0.3s ease-out; /* Use ease-out for smooth transition */
    font-size: 15px; /* Reduced font size of the navigation links */
    font-family: 'PremierLeagueW01-Bold', Arial, sans-serif; /* Use Premier League font */
}

.main-navigation .nav-list .nav-link {
    font-size: 20px; /* Reduced font size of the navigation links */
}

/* Remove hover effect */
.main-navigation .nav-list .nav-link:hover {
    transform: none;
    transition: none;
}

.nav-link:hover { 
    color: #FFD700; /* Change text color to gold on hover */
    transition: background-color 0.5s ease, color 0.5s ease; /* Smooth transition for hover effects */
}

.logo-container:hover .logo {
    transform: scale(1.1); /* Increase size by 10% on hover */
    transition: transform 0.3s ease; /* Smooth transition for hover effects */
}

.logo-container .logo {
    transition: transform 0.5s ease; /* Smooth transition for hover away effects */
}

.login-button {
    background-color: #FFD700; /* Gold color for the button */
    color: #000000; /* Dark text color */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'PremierLeagueW01-Bold', Arial, sans-serif; /* Ensure consistent font */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-right: 20px; /* Space between the nav items and the button */
    border-radius: 5px; /* Rounded edges */
}

.login-button i {
    margin-right: 8px; /* Space between icon and text */
}

.login-button:hover {
    background-color: #e6b800; /* Darker gold on hover */
    transform: scale(1.05); /* Slightly increase size on hover */
    font-family: 'PremierLeagueW01-Bold', Arial, sans-serif; /* Ensure consistent font on hover */
}

.content-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    background-color: #fff; /* White background for the content */
    padding: 20px;
    margin-top: 420px; /* Adjusted space for the smaller fixed navigation bar */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    min-height: 100vh; /* Ensure it covers the full height */
    position: relative;
    z-index: 2; /* Ensure it is above the background image */
    overflow-y: visible; /* Let the page scroll normally instead of a contained scroll */
}

.scrollable-content {
    height: 100%;
    overflow-y: scroll;
}

.main-footer {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    padding: 40px 20px; /* Increase padding for more height */
    text-align: center;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo-img {
    height: 50px;
}

.social-media {
    margin-bottom: 20px;
}

.footer-buttons {
    margin-top: 20px;
}

.footer-content p {
    margin: 10px 0;
}

.social-media a {
    color: #fff; /* White color for icons */
    margin: 0 10px;
    text-decoration: none;
    font-size: 20px;
}

.social-media a:hover {
    color: #ff0033; /* Lighter color on hover */
}

.footer-button {
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
    font-weight: bold;
}

.footer-button:hover {
    color: #ff0033; /* Lighter color on hover */
}

.footer-separator {
    color: #fff;
}

.coming-soon {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to the top */
    height: 100vh;
    font-family: 'PremierLeagueW01-Bold', Arial, sans-serif;
    font-size: 3em;
    color: #000120;
    padding-top: 0px; /* Add padding to move it down slightly */
}

.secondary-bg {
    background-image: url('../images/Secondary BG.svg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    padding: 0px;
    text-align: center;
    font-family: 'PremierLeagueW01-Bold', Arial, sans-serif;
    font-size: 5em;
    color: #ffffff;
    font-weight: bold;
}

.MatchHistoryContainer {
    width: 90%;
    margin: 85px auto; /* Increase top margin to move it down */
    position: relative;
    text-align: center;
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.match-history-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
}

.match-history-table th, .match-history-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 2px solid #ddd;
}

.match-history-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.match-history-table tr:nth-child(odd) {
    background-color: #ffffff;
}

.match-history-table th {
    font-weight: bold;
    padding: 15px;
    border-bottom: 2px solid #a4a4a4;
    background-color: #000; /* Added black background */
    color: #fff; /* Added white text color */
    transition: none; /* No transition for header */
}

.match-history-table tbody tr:hover {
    background: linear-gradient(90deg, #21cfff, #8f4fff);
    color: #fff;
    transition: background 0.5s ease, color 0.5s ease;
}

.main-footer::after {
    content: "© 2025 All rights reserved";
    display: block;
    margin-top: 20px;
    font-size: 0.8em;
    color: #ccc;
}

.gradient-text {
    display: block;
    position: absolute;
    top: 50;
    left: 0;
    right: 0;
    height: 120px; /* Adjust height as needed */
    z-index: 1;
    background-image: url('../images/Secondary BG.svg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    color: #ffffff;
    font-family: 'PremierLeagueW01-Bold', Arial, sans-serif;
    font-size: 3em; /* Adjust font size to match original */
    text-align: center;
    line-height: 120px; /* Adjust line-height to center text vertically */
    width: 90%; /* Set the width to 90% */
    margin: 0 auto; /* Center the gradient horizontally */
    border-radius: 15px; /* Add rounded edges */
}

/* Styles for user profile dropdown in the header */
.user-profile {
  position: relative;
  cursor: pointer;
}

.user-profile .dropdown-menu {
  position: absolute;
  top: 50px; /* Adjust as needed so it appears below the profile container */
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  width: 150px;
  display: none;
}

/* Integrating vertical spacing and divider lines */
.user-profile .dropdown-menu .dropdown-item {
  display: block;
  padding: 10px 15px; /* Increased padding for better spacing */
  margin: 0; /* Removed margin to allow hover background to cover full width */
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
  font-size: 14px;
  border-bottom: 1px solid #ccc; /* 1px divider line between items */
}

.user-profile .dropdown-menu .dropdown-item:last-child {
  border-bottom: none;          /* Remove the divider from the last item */
}

.user-profile .dropdown-item:hover {
  background-color: #f2f2f2;
}

/* Make the logout item red */
.user-profile .dropdown-item.logout {
  color: red;
}

/* Ensure the username is white and adjust its left position */
.username {
  color: white;
  margin-right: 30px;
}

/* Also move the Discord avatar (icon) further to the left */
.user-profile .user-avatar {
  margin-right: 10px;
}

/* Add pointer cursor for match history table rows */
.match-history-table tbody tr {
  cursor: pointer;
}

/* Updated Ranked Leaderboard Smaller Styling */

.ranked-gradient-text {
    display: block;
    position: absolute;
    top: 50;
    left: 0;
    right: 0;
    height: 100px; /* Reduced header height */
    z-index: 1;
    background-image: url('../images/Secondary BG.svg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    color: #ffffff;
    font-family: 'PremierLeagueW01-Bold', Arial, sans-serif;
    font-size: 3em; /* Adjust font size as needed */
    text-align: center;
    line-height: 100px; /* Adjusted to match new height */
    width: 90%;
    margin: 0 auto;
    border-radius: 15px;
}

/* Duplicate of .MatchHistoryContainer */
.ranked-leaderboard-container {
    width: 90%;
    margin: 70px auto; /* Reduced vertical margin */
    position: relative;
    text-align: center;
    background-color: #fff;
    border-radius: 15px;
    padding: 15px; /* Reduced padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Duplicate of .match-history-table */
.ranked-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0; /* Reduced margin */
}

.ranked-leaderboard-table th, 
.ranked-leaderboard-table td {
    padding: 20px; /* Reduced padding inside cells */
    text-align: center;
    border-bottom: 2px solid #ddd;
}

.ranked-leaderboard-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.ranked-leaderboard-table tr:nth-child(odd) {
    background-color: #ffffff;
}

.ranked-leaderboard-table th {
    font-weight: bold;
    padding: 15px;
    border-bottom: 2px solid #a4a4a4;
    background-color: #000; /* Added black background */
    color: #fff; /* Added white text color */
    transition: none; /* No transition for header */
}

.ranked-leaderboard-table tbody tr:hover {
    background: linear-gradient(90deg, #21cfff, #8f4fff);
    color: #fff;
    transition: background 0.5s ease, color 0.5s ease;
}

/* Ensure all icons and text turn white on hover for ranked leaderboard */
.ranked-leaderboard-table tbody tr:hover td {
    color: #fff !important;
}

.ranked-leaderboard-table tbody tr:hover td i.fa-check-circle,
.ranked-leaderboard-table tbody tr:hover td i.fa-times-circle,
.ranked-leaderboard-table tbody tr:hover td i.fa-star,
.ranked-leaderboard-table tbody tr:hover td i.fas {
    color: #fff !important;
}

.ranked-leaderboard-table tbody tr {
    cursor: pointer;
  }

/* Improved sticky header for the ranked leaderboard table */
.ranked-leaderboard-table thead th {
    position: sticky;
    top: 85px;  /* stick just below the fixed navbar */
    background-color: #000;  /* Changed to black background */
    color: #fff;  /* Added white text color */
    z-index: 10;  /* ensure header is above table rows */
    padding: 10px;  /* matching padding (adjust if needed) */
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4); /* subtle shadow for separation */
}

/* Improved sticky header for the match history table */
.match-history-table thead th {
    position: sticky;
    top: 85px;  /* Adjust this to match your fixed navbar's height */
    background-color: #000;  /* Changed to black background */
    color: #fff;  /* Added white text color */
    z-index: 10;  /* Ensure the header sits above the table body rows */
    padding: 10px;  /* Adjusted padding as needed */
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4); /* Subtle shadow to separate from the content */
}

/* Styling for the search bar above the leaderboard table */
.search-bar-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: -15px;
}

.search-bar-wrapper {
    position: relative;
    display: inline-block;
}

.search-bar-wrapper .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 1rem;
}

.search-bar-wrapper input {
    width: 300px;
    padding: 10px 15px 10px 40px; /* extra left padding for the icon */
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 25px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-bar-wrapper input:focus {
    border-color: #00c6ff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* New CSS for active/sorted table header styling */
.ranked-leaderboard-table thead th.active {
    color: #FFD700; /* Changed to gold for better visibility on black background */
    transition: color 0.3s ease;
}

/* New CSS rule to add a crown icon after admin usernames */
.username.admin::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  vertical-align: top;
  background: url('../images/admin.png') no-repeat center center;
  background-size: contain;
}

/* Make rating values bold */
.rating-value {
  font-weight: bold;
}

/* Style the match score to be more prominent */
.match-history-table tr td:nth-child(4) {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
  text-align: center;
  transition: color 0.5s ease; /* Added transition to match row hover transition */
}

/* Ensure score text color changes on hover */
.match-history-table tbody tr:hover td:nth-child(4) {
  color: inherit;
}

/* Style for MVP cells */
.match-history-table tr td:nth-child(3),
.match-history-table tr td:nth-child(5) {
  text-align: center;
}

/* Style for leaderboard avatars */
.leaderboard-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-right: 5px;
}

/* Vertically align player name text */
.ranked-leaderboard-table tbody tr td:nth-child(2) {
  vertical-align: middle;
  line-height: 40px; /* Match the height of the avatar */
}

/* Make player rows clickable */
.player-row {
  cursor: pointer;
  transition: transform 0.1s ease;
}

.player-row:hover {
  transform: translateY(-2px);
}

/* Match history table row hover effects */
.match-history-table tbody tr:hover {
    background: linear-gradient(90deg, #21cfff, #8f4fff);
    color: #fff;
    transition: background 0.5s ease, color 0.5s ease;
}

/* Ensure all icons and text turn white on hover */
.match-history-table tbody tr:hover td {
    color: #fff !important;
}

.match-history-table tbody tr:hover td i.fa-check-circle,
.match-history-table tbody tr:hover td i.fa-times-circle,
.match-history-table tbody tr:hover td i.fa-star,
.match-history-table tbody tr:hover td i.fas {
    color: #fff !important;
}

/* Month Selector Styling (matched to search bar) */
.month-filter-container {
    position: relative;
    display: inline-block;
}

.month-selector {
    width: 220px;
    padding: 10px 15px 10px 40px;
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 25px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="16" width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    background-size: 12px;
    cursor: pointer;
    font-family: 'PremierLeagueW01-Bold', Arial, sans-serif;
}

.month-selector:focus {
    border-color: #00c6ff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.month-filter-container .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 1rem;
    pointer-events: none;
}

/* Media query for mobile screens */
@media (max-width: 600px) {
    .month-selector-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .month-selector-container label {
        margin-bottom: 5px;
    }
    
    .month-selector {
        width: 100%;
    }
}