body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
}

h1 {
    background-color: #1a1a1a;
    text-align: center;
    color: white;
}

.nav-container {
    background-color: #1a1a1a;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.nav-links {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center;     /* Center the items vertically */
    margin: 0;
}

.nav-links li {
    margin: 0 20px;
    height: 100%; /* Add this */
    position: relative; /* Needed for dropdown positioning */
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #ff9800;
}

/* Mobile responsiveness (small screens) */
@media (max-width: 600px) {
    .nav-links {
        display: flex;      /* Ensure the items stay side by side */
        justify-content: center; /* Center horizontally */
        align-items: center;     /* Center vertically */
        width: 100%; /* Make sure the nav links take full width */
        flex-wrap: wrap; /* Allow wrapping if necessary */
    }

    .nav-links li {
        margin: 0 10px;  /* Smaller margin on mobile */
    }

    /* Optionally, reduce padding in the nav-container on small screens */
    .nav-container {
        padding: 10px 15px; /* Adjust padding for mobile */
    }
}

.image-container {
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    align-items: center; /* Center rows */
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 1%;
    margin-bottom: 5%;
}

.row {
    display: flex;
    justify-content: center;
    width: 100%;
}

.center {
    justify-content: center;
}

h3 {
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

#managerTable {
    width: 50%;
    max-width: 50%;
    overflow-x: auto;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 20px auto;
    
}

#managerTable2 {
    width: 50%;
    max-width: 50%;
    overflow-x: auto;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 20px auto;
}

#managerTable th, #managerTable td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
    font-size: 14px;
    color: white;
}

#managerTable th {
    background-color: rgb(48, 48, 48);
    font-weight: bold;
    color: white;
}

#managerTable2 th, #managerTable2 td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
    font-size: 14px;
}

#managerTable2 th {
    font-weight: bold;
    color: white;
}

#managerTable2 td {
    color: white;
}

/* General table style */
table {
    table-layout: auto;
    width: 100%; /* Ensure the table width doesn't stretch too far */
    margin: 0 auto;  /* Center the table */
}

/* Ensure tables have proper layout */
#playersTableGK,
#playersTableDEF,
#playersTableMID,
#playersTableFWD,
#playersTableAMS {
    width: 100%; /* Ensure the tables fill the width of their container */
    table-layout: auto; /* Allow DataTables to handle column width */
    margin: 0 auto;  /* Center the table */
}

/* Styling for the DataTable wrapper to avoid conflicts */
#playersTableGK_wrapper,
#playersTableDEF_wrapper,
#playersTableMID_wrapper,
#playersTableFWD_wrapper,
#playersTableAMS_wrapper {
    width: 90%;  /* Set wrapper width to 90% */
    overflow-x: auto;
    margin: 5px auto 25px; /* Center the wrapper with equal margin */
}


/* Additional margin and padding adjustments for better spacing on mobile */
@media (max-width: 768px) {
    #playersTableGK_wrapper,
    #playersTableDEF_wrapper,
    #playersTableMID_wrapper,
    #playersTableFWD_wrapper,
    #playersTableAMS_wrapper {
        width: 80%;
        padding: 0 5px;
    }
}

.button-container {
    text-align: center;
    margin-top: 1px;
    margin-bottom: 10px;
}

.download-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.download-btn:hover {
    background-color: #45a049;
}

p {
    text-align: center;
    margin-bottom: 0px;
    width: 70%;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 10px;
    margin: 0 auto;
    color: white;
}

tbody {
    background-color: #1a1a1a !important; /* Force dark background for tbody */
    color: white; /* Text color */
}

/* Apply black background to all table data cells */
td {
    background-color: black !important; /* Ensure all td have black background */
    color: white; /* White text */
}

/* Optional: Make sure header cells have a dark background */
th {
    background-color: #1a1a1a; /* Dark background for headers */
    color: white; /* White text */
}

/* Apply gray background to td.sorting_1 inside odd rows only */
tr.odd td.sorting_1 {
    background-color: #1a1a1a !important; /* Gray background for sorting_1 inside odd rows */
    color: white; /* White text */
}

tr.even td.sorting_1 {
    background-color: #1a1a1a !important; /* Gray background for sorting_1 inside odd rows */
    color: white; /* White text */
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: .5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    /* color: #333 !important; */
    border: 1px solid transparent;
    border-radius: 2px;
}

.dataTables_wrapper .dataTables_paginate {
    color: white !important;
}

.dataTables_info {
    color: white !important;
}

/* Default (non-active) page buttons */
div#playersTableGK_paginate .paginate_button,
div#playersTableDEF_paginate .paginate_button,
div#playersTableMID_paginate .paginate_button,
div#playersTableFWD_paginate .paginate_button,
div#playersTableAMS_paginate .paginate_button {
    color: white !important; /* Text color */
}

/* Current (active) page button */
div#playersTableGK_paginate .paginate_button.current,
div#playersTableDEF_paginate .paginate_button.current,
div#playersTableMID_paginate .paginate_button.current,
div#playersTableFWD_paginate .paginate_button.current,
div#playersTableAMS_paginate .paginate_button.current {
    color: white !important; /* Text color */
    border: none !important; /* Remove border if it exists */
}


a#playersTableGK_next.paginate_button.next, a#playersTableDEF_next.paginate_button.next, a#playersTableMID_next.paginate_button.next, a#playersTableFWD_next.paginate_button.next, a#playersTableAMS_next.paginate_button.next {
    color: white !important;
}

a#playersTableGK_previous.paginate_button.previous, a#playersTableDEF_previous.paginate_button.previous, a#playersTableMID_previous.paginate_button.previous, a#playersTableFWD_previous.paginate_button.previous, a#playersTableAMS_previous.paginate_button.previous {
    color: white !important;
}

label {
    color: white !important;
}

/* Style the select dropdown */
select {
    background-color: #1a1a1a;;  /* Dark background for better contrast */
    color: #fff;             /* White text color for readability */
    border: 1px solid #1a1a1a;; /* Border for better visibility */
}

/* Style the options within the select dropdown */
select option {
    background-color: #1a1a1a;;  /* Dark background for options */
    color: #fff;             /* White text color for options */
}

/* Optional: Change the background color of options when hovered or selected */
select option:hover {
    background-color: #1a1a1a;  /* Lighter dark background on hover */
}

select option:checked {
    background-color: #1a1a1a;;  /* Change color for selected option */
}

input[type="search"] {
    color: #fff;                /* White text color */
    background-color: #1a1a1a;     /* Dark background color for input */
    border: 1px solid white;     /* Light border for visibility */
    padding: 5px 10px;          /* Padding for spacing */
    font-size: 16px;            /* Adjust font size if needed */
}

/* Optional: Style the placeholder text */
input[type="search"]::placeholder {
    color: #bbb;                /* Lighter color for the placeholder */
}

.space {
    height: 100px;
}

.dropdown {
    height: 100%;
    position: relative;
}

/* The button inside the nav */
.dropbtn {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 0px 5px;  /* good size for clickable area */
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    height: 100%; /* ensure it fills parent li */
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 160%; /* now this really means: below navbar */
    left: 0;
    background-color: #1a1a1a;
    z-index: 999;
    min-width: 110px;
    border: 1px solid #333;
    border-radius: 4px;
    transform: translateX(-24%);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.3); /* Optional */
}

/* Add an invisible "buffer" element to extend hover */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -20px;      /* 20px above the dropdown */
    left: 0;
    width: 100%;
    height: 20px;    /* buffer height */
    /* transparent background so it's invisible */
    background: transparent;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Dropdown menu links */
.dropdown-content a {
    color: white;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s;
}

.dropdown-content a:hover {
    background-color: #333;
    color: #ff9800;
}

.nav-links li {
    margin: 0 20px;
    height: 100%; /* Add this */
    position: relative; /* Needed for dropdown positioning */
}

a.underline-anim {
  color: #007bff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

a.underline-anim:hover {
  border-bottom-color: #007bff;
  cursor: pointer;
}

h2 {
    color: white !important;
}

th {
    background-color: #007bff;
    color: white;
}