/* General body styles */
body {
    font-family: 'Roboto Slab', 'Verdana', 'Arial', 'Trebuchet MS', sans-serif; /* Use Roboto Slab as the primary font */
    background-color: #4682B4;
    color: #ffffff;
}

/* Top header styles */
.top-header {
    background-color: #4682B4; /* Same as body background color */
    text-align: right;
    padding: 5px 10px;
}

/* Header styles */
.header {
    background-color: #333; /* Dark background for the header */
    padding: 10px; /* Padding for the header */
    text-align: left; /* Align items to the left */
}

.header-title {
    font-family: 'Roboto Slab', serif; /* Use Roboto Slab for the header title */
    font-size: 2.5em; /* Large font size */
    color: #FFD700; /* Gold color for the header title */
    margin: 0; /* Remove default margin */
}

.top-header a {
    color: #FFD700; /* Gold color for the logout link */
    text-decoration: none; /* Remove underline from the link */
    font-size: 0.8em; /* Smaller font size for the logout link */
}

.top-header a:hover {
    text-decoration: underline; /* Underline the link on hover */
}

/* Style for input elements with the class "small-input" */
input.small-input {
    width: 50px; /* Set the width of input elements with the class "small-input" to 50 pixels */
    -webkit-appearance: none; /* Remove increment/decrement arrows in WebKit browsers */
    -moz-appearance: textfield; /* Remove increment/decrement arrows in Firefox */
    appearance: none; /* Remove increment/decrement arrows in standard browsers */
}

/* Additional style to hide spinner in Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Style the form elements */
form {
    background: #ffffff; /* Set the background color of the form to white */
    padding: 20px; /* Add padding inside the form */
    border-radius: 10px; /* Round the corners of the form */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow effect to the form */
    color: #000000; /* Set the text color inside the form to black */
}

label {
    display: block; /* Make labels block elements */
    margin-bottom: 8px; /* Add some space below each label */
    font-weight: bold; /* Make labels bold */
}

input[type="email"], input[type="password"], input[type="text"] {
    width: 300px; /* Make the input fields take up the full width of the form */
    padding: 10px; /* Add padding inside the input fields */
    margin-bottom: 15px; /* Add some space below each input field */
    border: 1px solid #ccc; /* Add a light gray border around the input fields */
    border-radius: 5px; /* Round the corners of the input fields */
}

button {
    background-color: #4CAF50; /* Set the background color of the button to green */
    color: white; /* Set the text color of the button to white */
    padding: 10px 20px; /* Add padding inside the button */
    border: none; /* Remove the border from the button */
    border-radius: 5px; /* Round the corners of the button */
    cursor: pointer; /* Change the cursor to a pointer when hovering over the button */
}

button:hover {
    background-color: #45a049; /* Change the background color of the button when hovering */
}

a {
    color: #FFD700; /* Set the color of links to gold */
    text-decoration: none; /* Remove the underline from links */
}

a:hover {
    text-decoration: underline; /* Add an underline to links when hovering */
}

p {
    margin-top: 20px; /* Add some space above paragraphs */
}

/* Add table styling */
.dashboard-table {
    width: 100%; /* Use full width within the section */
    max-width: 50%; /* Ensure table uses only 50% of the screen width */
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #D3D3D3; /* Set table background to light grey */
    word-wrap: normal; /* Ensure text does not wrap */
    overflow-x: auto; /* Enable horizontal scrolling if necessary */
}

/* Only vertical borders for table cells */
.dashboard-table th,
.dashboard-table td {
    border-right: 1px solid #333; /* Add vertical lines with the specified color */
    border-left: 1px solid #333; /* Add vertical lines with the specified color */
    padding: 8px;
    background-color: #D3D3D3; /* Match container background color */
    white-space: nowrap; /* Ensure text does not wrap */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
    overflow: hidden; /* Hide overflow */
}

.dashboard-table th {
    text-align: left; /* Left-align the headers */
    background-color: #333; /* Use the same background color as the website header */
    color: yellow; /* Yellow text for headers */
    border-right: 1px solid #FFD700; /* Yellow vertical border for header row */
    border-left: 1px solid #FFD700; /* Yellow vertical border for header row */
}

.dashboard-table td {
    border-top: none; /* No top border */
    border-bottom: none; /* No bottom border */
}

/* Ensure all rows have a transparent background to inherit the table background */
.dashboard-table tr {
    background-color: transparent;
}

.dashboard-table tr:hover {
    background-color: #ddd; /* Slight grey background on hover */
}

/* Dashboard table link color */
.dashboard-table a {
    color: #007bff; /* Change link color to a readable color */
    text-decoration: none;
}

.dashboard-table a:hover {
    text-decoration: underline;
}

/* Styling for yellow separator */
.yellow-separator {
    color: yellow;
}

/* Styling for yellow horizontal line */
.yellow-line {
    border: none;
    height: 3px;
    background-color: yellow;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Center text */
.center-text {
    text-align: center;
}

/* Highlighted text */
.highlight {
    color: yellow;
}

/* Team and manager name */
.team-manager-name {
    color: #333; /* Set the color of the team and manager name to #333 */
}

/* Dashboard container styling */
.dashboard-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns with equal width */
    gap: 20px; /* Space between columns */
    margin-top: 20px; /* Space above the grid */
}

.entries-section,
.league-table-section {
    background-color: #D3D3D3; /* Light grey background for sections */
    color: #000000; /* Black text for better readability */
    padding: 20px; /* Padding inside sections */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect for sections */
}

/* Section header styling */
.entries-section h2,
.league-table-section h2 {
    color: #333; /* Dark color for section headers */
    margin-top: 0; /* Remove top margin */
}

/* Responsive text size adjustment */
@media (max-width: 768px) {
    .dashboard-table th,
    .dashboard-table td {
        font-size: 0.9em; /* Smaller text size on smaller screens */
    }
}