/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
    font-family: "Open Sans", sans-serif;;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8; /* Light gray background */
    -webkit-font-smoothing: antialiased; /* Smooth text on webkit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smooth text on firefox */
}

.container{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}

header .container > div:first-child {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Equivalent to space-x-6 */
}

/* Header Styles */
header {
    background-color: #0a3161; /* Dark blue */
    color: white;
    padding: .1rem 0; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Softer shadow */
    position: fixed; /* Make header sticky */
    top: 0;
    left: 0;
    width: 100%;             /* Full width */  
    z-index: 100; /* Ensure header stays on top */
    display: flex; /* Use flexbox for header */
    flex-direction: column; /* Stack header elements vertically */
    align-items: center; /* Center items vertically */
}

header .container {
    padding: 0 1px;
    display: flex; /* use flex to layout the items */
    justify-content: center; /* Space out the h1 and nav */
    align-items: center;
    width: 100%; /*Ensure full width*/
    flex-direction: column; /*Make header container stack vertically*/
}


header h1 {
    font-weight: 600; /* Slightly bolder */
    text-align: center; /* Center the heading text */
    font-size: 1.8em; /* Reduced to make the text fit. */
    white-space: nowrap; /* Prevent wrapping */
    font-family: "Josefin Sans", sans-serif; 
    letter-spacing: 1px; /*Added letter spacing*/
}


/* styles.css */
#refresh-date {
    font-size: 0.7em; /* Slightly smaller text */
    text-align: center; /*Ensure that the text is centered*/
    white-space: nowrap;
}

.title-and-date {
    display: flex; /* Ensure that the title and date are flex */
    flex-direction: column; /*Ensure the title and date stack vertically*/
    width: 100%; /* Make the width 100% so that the title is full width */
}

nav {
    width: 100%; /* Make the nav take full width */
    padding-top: 0; /* Add space above the links container */
}

nav ul {
    display: flex;
    list-style: none;
    justify-content: center; /* Center align nav links */
    gap: 5px; /* Increase space between links */
    flex-wrap: wrap; /* Allow links to wrap */
}

nav ul li a {
    color: white;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    padding: 0.75rem 1.25rem; /* Larger padding */
    transition: color 0.3s, background-color 0.3s; /* Add background-color transition */
    border-radius: 10px; /* Rounded corners */
}

nav ul li a:hover,
nav ul li a.active {
    color: #fff; /* White on hover/active */
    background-color: #e94335; /* Red background on hover/active */
}

/* Main Content Styles */
main {
    flex-grow: 1;            /* Allow the main to grow to fill the space */
    margin-top: 150px;        /* Add top margin to avoid overlap with header (adjust as needed)*/
    margin-bottom: 45px;     /* Add bottom margin to avoid overlap with footer (adjust as needed)*/
    padding: 20px;         /* Add some padding */
  }

section {
    margin-bottom: 2rem; /* More space between sections */
    margin-top: 50px;
    background-color: #fff; /* White sections */
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Softer shadow on sections */
}

h2 {
    margin-bottom: 1rem;
    color: #0a3161;
    border-bottom: 2px solid #e94335;
    padding-bottom: 0.5rem;
    font-weight: 600; /* Slightly bolder */
}

h3 {
    margin-bottom: 1rem;
    color: #0a3161;
    font-weight: 600; /* Slightly bolder */
}


/* Teams Table */
.teams-table-wrapper {
    overflow-x: auto; /* Add overflow-x to the wrapper */
}
.teams-table {
    width: 100%;
    border-collapse: separate; /* Use separate border-collapse */
    border-spacing: 0; /* Remove border spacing */
    font-size: .9rem;
    border-radius: 8px; /* Rounded corners for the table */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.teams-table th,
    .teams-table td,
    #transactionsTable th,
    #transactionsTable td {
    padding: 0.4rem; /* Increased padding */
    text-align: left;
    border-bottom: 1px solid #eee; /* Lighter border */
    white-space: nowrap;
}

.teams-table th {
    background-color: #f5f5f5; /* Light gray header */
    font-weight: 600;
    text-transform: uppercase; /* Uppercase header text */
    cursor: pointer; /* Add cursor pointer on header */
    font-size: 0.9rem;
}

.teams-table th:hover {
    background-color: #eee;
}

.teams-table td a {
    color: #0a3161; /* Dark blue link color */
    text-decoration: none;
    font-weight: 500; /* Bold link */
    transition: color 0.3s;
}

.teams-table td a:hover {
    color: #e94335; /* Red link color on hover */
    text-decoration: underline;
}

.teams-table tbody tr:hover {
    background-color: #f8f8f8; /* Light gray on hover */
}

.teams-table .asc::after,
.teams-table .desc::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    margin-left: 5px;
    vertical-align: middle;
}

.teams-table .asc::after {
    border-bottom: 5px solid #333;
}

.teams-table .desc::after {
    border-top: 5px solid #333;
}

.alert-icon {
    margin-left: 5px;
    color: red;
}

.highlight {
    /*font-weight: bold;*/
    color: red;
}
.negative-transaction {
    color: red;
}
.keeper-icon {
    color: red;
    font-weight: bold; 
    font-size: 0.8em; 
  }
/* Center align specific columns in teams-table */
.teams-table td:nth-child(3), /* Salary */
.teams-table td:nth-child(4), /* # Active */
.teams-table td:nth-child(5), /* # IL */
.teams-table td:nth-child(6) /* # KIL */ 
{
    text-align: center;
}

.teams-table th:nth-child(3), /* Salary */
.teams-table th:nth-child(4), /* # Active */
.teams-table th:nth-child(5), /* # IL */
.teams-table th:nth-child(6) /* # KIL */ 
{
    text-align: center;
}
#transactionsTable td:nth-child(6), /* Change */
#transactionsTable td:nth-child(7) /* Salary */ 
{
    text-align: center;
}
/* Team Details Page - Sticky Name Column */
.roster-table {
    min-width: 100%; /* Ensure table doesn't shrink smaller than its content */
    width: max-content;
    border-collapse: collapse;
    white-space: nowrap;
}
.roster-table th,
.roster-table td {
    padding: 0.4rem;
    text-align: left;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    overflow: hidden;
}
.roster-table tr:nth-child(even) {
    background-color: #f7f7f7;
    color: #000000;
  }
/* Sticky header for the roster table */
.roster-table-wrapper {
    overflow-y: auto; /* Enable vertical scrolling within the wrapper */
    max-height: 800px; /* Adjust as needed to control the scrollable area */
    width: 100%;
    margin-top: 0.25rem;
}
.roster-table thead {
    position: sticky;
    top: 0;
    background-color: #f5f5f5;
    z-index: 2;
}
.roster-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}
/* Remove background color from the row cells to prevent stacking */
.roster-table td {
    background-color: transparent;
}
.team-header {
    display: flex;
    flex-direction: column;
    margin-bottom: .5rem; /* Reduced spacing */
}

.back-button {
    margin-bottom: .5rem;
    color: #0a3161;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    padding: 10px 15px;
    transition: background-color 0.3s, color 0.3s;
    max-width: 125px; /* Added max-width */
    width: 100%; /* Ensure it's responsive within the max-width */

}


/* team-info-card */
.team-info-card {
    background-color: #fff;
    /* border-radius: 8px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 250px; /* Added max-width */
    width: 100%; /* Ensure it's responsive within the max-width */
    height: 7em;
    border: 1px solid #ddd; /* Light border for visual separation */
    padding: 10px;
    border-radius: 5px; /* Rounded corners */
    margin-bottom: 10px;
}

.team-detail-header {
    margin-top: 0;
    margin-bottom: 10px;
}

.team-detail-manager,
.team-detail-salary,
.team-detail-record {
    margin-bottom: 0.25rem; /* Reduced margin-bottom (was 0.5rem) */
    font-size: .9rem;
}
.team-detail-header h2 {
    margin-bottom: 0.25rem;
    font-size: 1.15em;
}

/* Roster Section */
.roster-categories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.roster-categories > div{ 
    min-width: 0;
}


/* Footer Styles */
footer {
    background-color: #0a3161; /* Dark blue */
    color: white;
    text-align: center;
    margin-top: 2rem;
    position: fixed;        /* Make the footer fixed */
    bottom: 0;              /* Pin it to the bottom */
    left: 0;
    width: 100%;             /* Full width */
    padding: 10px 20px;        /* Add some padding */
    z-index: 100;            /* Ensure it's on top of other content */   
}
footer a{
    color: white; /* Ensure link is white */
    transition: color 0.3s; /* Optional: Add transition for smooth color change */
    font-weight: 600;
    }

footer a:hover{
    color: white; /* Ensure link is white on hover */
}
.high-salary{
    color: red;
    font-weight: 600;
}

.bold-row {
    font-weight: bold;
}
#transactionsTable .negative-transaction {
    color: darkred;
}



/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    section {
        margin-top: 35px;
    }
    h2 {
        font-size: 1em; /* Smaller on smaller screens */
    }
    .title-and-date {
        font-size: .5rem; 
    }    
    
    /* Ensure tables are full width */
    .roster-table,
    .teams-table {
        width: 100%; /* Take up full width of the container */
        font-size: 0.75rem !important; /* Slightly increase the font size */
    }
    .teams-table tr:nth-child(even) {
        background-color: #f7f7f7;
        color: #000000;
      }
    .teams-table-wrapper,
    .roster-table-wrapper {
        width: 100%;
        overflow-x: auto;
        display: block;
        margin-top: 0.25rem;
        max-height: 500px; /* Adjust as needed to control the scrollable area */
    }
    .team-info-card {
        padding: 0.5rem; /* Further reduced padding on mobile */
        font-size: 0.85rem !important;
        margin-bottom: 0.15rem; /* Further reduced margin-bottom on mobile */
        border-radius: 4px; /* Rounded corners for the team card */
        max-width: 200px;
    }
    .team-detail-header {
        margin-bottom: 0.1rem; 
    }
    .team-detail-manager,
    .team-detail-salary,
    .team-detail-record {
        margin-bottom: 0.1rem; /* Further reduced margin-bottom on mobile */
        font-size: .8rem;
    }
    .team-detail-header h2 {
        margin-bottom: 0.1rem;
        font-size: 1em;
    }

    nav ul {
        display: none;
        flex-direction: column; /* Stack links vertically */
        position: absolute;
        top: 100%; /* Position below the header */
        left: 0;
        width: 100%;
        background-color: #0a3161; /* Match header background */
        z-index: 10; /* Ensure it's above other content */
        padding: 10px 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    nav ul.show {
        display: flex; /* Show the navigation when the class is added */
    }

    nav ul li {
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        display: block;
        padding: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle divider */
    }
    nav ul li a:hover,
    nav ul li a.active {
        background-color: #e94335;
    }

    /* Hamburger Icon */
    .hamburger {
        display: block;
        cursor: pointer;
        padding: 5px;
        position: absolute;
        top: 0px;
        right: 5px;
        z-index: 11; /* Ensure it's above the navigation */
    }

    .hamburger .line {
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 5px 0;
        transition: 0.4s;
    }

    /* Hamburger Animation */
    .hamburger.active .line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .line:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Adjust header container to accommodate hamburger */
    header .container {
        position: relative; /* Needed for absolute positioning of hamburger */
        padding: 0 15px;
    }
    header .container > div:first-child {
        gap: 0.5rem;
    }
    header h1 {
        font-size: 1.15em;
    }
}
    .roster-categories {
        grid-template-columns: 1fr; /* Change to a single column layout */
    }

    /* Center the content of the loading row */
    .loading-row td {
        text-align: center;
    }

    .roster-table th,
    .roster-table td,
    .teams-table th,
    .teams-table td {
        padding: 0.5rem; /* Reduced padding */
        overflow: visible;
    }

    .teams-table {
        border-collapse: collapse;
    }

    .teams-table th {
        font-size: 0.8rem;
    }

    .back-button {
        padding: 1px 1px;
        font-size: .8em;
        max-width: 75px; /* Added max-width */
    
    }
    footer a{
        font-size: 12px;
    }


@media (max-width: 450px) {
    .roster-table-wrapper {
        width: 100%;
        overflow-x: auto;
        display: block;
        margin-top: 0.25rem;
        max-height: 400px; /* Adjust as needed to control the scrollable area */
    }
}