/* General styles for the draft board */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 20px 0;
    margin: 0;
    text-align: center;
}

h1 {
    margin: 10px 0 0 0;
}

main {
    display: grid;
    grid-template-columns: 1fr 4fr; /* Allocate 20% to Sleeper League ID section and 80% to the draft table */
    gap: 20px; /* Add spacing between sections */
    padding: 20px;
    align-items: flex-start;
}

section {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

#draftQueue {
    grid-column: 1; /* Ensure Draft Queue is in the first column */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#draftQueue > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#draftQueue input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%; /* Make input take full width of its container */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

#draftQueue button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#draftQueue button:hover {
    background-color: #0056b3;
}

#draftQueue label {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #555;
}

#draftQueue input[type="checkbox"] {
    margin-right: 5px;
}


#playerPool {
    grid-column: 1; /* Keep Player Pool in the first column */
    /* Removed float, margin: 0 auto, and width: auto */
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column; /* Stack children vertically */
    gap: 10px; /* Add space between direct children (h2, controls, player list) */
    padding: 15px; /* Increased padding for better spacing */
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    max-height: 80vh;
    display: block; /* Ensure it is visible */
    margin-bottom: 15px; /* Add space below the section */
    align-items: stretch; /* Stretch children to fill the container width */
}

#draftBoard {
    grid-column: 2; /* Ensure Draft Board occupies the second column */
    display: flex;
    flex-direction: column; /* Stack Player Pool and Draft Board vertically */
    justify-content: space-between;
}

#draftTable {
    display: flex;
    flex-direction: column; /* Stack header row and grid vertically */
    align-items: stretch; /* Ensure both header and grid take full width */
    gap: 10px; /* Add spacing between header row and grid */
    width: 100%; /* Ensure it takes full advantage of the allocated space */
    max-width: none; /* Remove any maximum width constraints */
    margin: 0 auto; /* Center align within the parent section */
    flex-grow: 1; /* Allow draftTable to take up all available space */
    height: 99%; /* Ensure it stretches to fill the parent container */
}


/* Draft Board Container */
.draft-board-container {
    display: flex; /* Use flexbox for the main container */
    flex-direction: column; /* Stack header and rows vertically */
    width: 100%;
    gap: 10px; /* Space between header and rows */
}

/* Draft Header Row */
.draft-header-row {
    display: grid; /* Use grid for the header to align with round rows */
    /* The first column is for the round indicator, subsequent columns for teams */
    grid-template-columns: 100px repeat(var(--num-teams, 12), 1fr);
    gap: 10px; /* Match gap in round rows */
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    background-color: #f4f4f4;
    padding: 10px 0;
    border-bottom: 2px solid #ccc;
}

/* Round Indicator Header - Empty space for alignment */
.round-indicator-header {
    /* This cell aligns with the round indicator column */
    grid-column: 1;
    padding: 3px;
    background-color: transparent;
    border-radius: 4px;
}

.draft-header-cell {
    /* Styling for owner names in the header */
     text-align: center;
     font-weight: bold;
     overflow: hidden; /* Hide overflowing text */
     text-overflow: ellipsis; /* Add ellipsis for overflow */
     white-space: nowrap; /* Prevent wrapping */
}


/* Draft Round Row */
.draft-round-row {
    display: grid; /* Use grid for the main row layout */
    /* First column for the indicator, second for the cards container */
    grid-template-columns: 100px 1fr;
    gap: 10px; /* Gap between indicator and cards container */
    width: 100%;
    margin-bottom: 10px;
    align-items: start; /* Align items to the top of the grid cell */
}

/* Style for the round indicator element */
.round-indicator {
    /* This element is in the first grid column */
    grid-column: 1;
    width: 90px; /* Fixed width for the indicator */
    flex-shrink: 0; /* Prevent shrinking */
    display: flex;
    flex-direction: column; /* Stack content vertically if needed */
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    border-radius: 0; /* Square corners */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Add a subtle shadow */
    height: 150px; /* Match card height */
}

/* Style even/odd round indicators differently for visual clarity */
.draft-round-row:nth-child(odd) .round-indicator {
    background-color: rgba(0, 123, 255, 0.9); /* Example color - slightly more opaque */
}

.draft-round-row:nth-child(even) .round-indicator {
    background-color: rgba(40, 167, 69, 0.9); /* Example color - slightly more opaque */
}

/* Container for the draft cards */
.draft-cards-container {
    /* This element is in the second grid column */
    grid-column: 2;
    display: flex; /* Use flexbox to lay out the cards */
    gap: 10px; /* Space between cards */
    flex-wrap: nowrap; /* Prevent wrapping */
    justify-content: flex-start; /* Default L-R flow */
    width: 100%; /* Take full width of the grid cell */
}

/* Style for reversed display on the cards container */
.draft-round-row .draft-cards-container.reverse-display {
    flex-direction: row-reverse; /* Reverse the visual order of cards */
    /* Justification should still be flex-start to align reversed items to the left */
    justify-content: flex-start;
}

/* Draft Card */
.draft-card {
    /* Use flex-basis to control card width within the flex container */
    /* Ensure flex-basis calculation accounts for the gap within the cards container */
    flex-basis: calc((100% - (var(--num-teams, 12) - 1) * 10px) / var(--num-teams, 12)); /* Calculate width considering gaps */
    flex-grow: 0; /* Prevent cards from growing */
    flex-shrink: 0; /* Prevent cards from shrinking below basis */
    height: 150px; /* Set a fixed height for uniformity */
    padding: 5px; /* Reduce padding for each card */
    box-sizing: border-box; /* Include padding and border in width and height */
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    display: flex; /* Use flexbox within the card for content layout */
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Distribute space between items */
    align-items: center; /* Center content horizontally */
    position: relative; /* Needed for absolute positioning of the banner */
    padding-bottom: 25px; /* Add padding at the bottom for the banner */
}

.draft-card:hover {
    transform: scale(1.05);
}

.pick-made {
    background-color: #e6f7ff; /* Light blue background for picks that have been made */
    border-color: #91d5ff;
}

/* Position-specific colors for player selections */
.pick-made[data-position="QB"] {
    background-color: #d4edbc; /* Light green for QB */
    border-color: #a5d46a;
}

.pick-made[data-position="RB"] {
    background-color: #bfe1f6; /* Light blue for RB */
    border-color: #7cc2e7;
}

.pick-made[data-position="WR"] {
    background-color: #ffe5a0; /* Light yellow for WR */
    border-color: #ffd24d;
}

.pick-made[data-position="TE"] {
    background-color: #ffc8aa; /* Light orange for TE */
    border-color: #ff9966;
}

.pick-made[data-position="K"] {
    background-color: #e6cff2; /* Light purple for K */
    border-color: #ca9ce0;
}

.pick-made[data-position="DEF"], .pick-made[data-position="DST"] {
    background-color: #e8eaed; /* Light gray for DST */
    border-color: #c4c9d4;
}

/* Pick Number */
.pick-number {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

/* Player Selected */
.player-selected {
    font-size: 12px;
    font-weight: bold;
    color: #007bff;
    flex-grow: 1; /* Allow player name to take up available space */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px; /* Add some horizontal padding */
}

/* Pick Owner Banner */
.pick-owner {
    position: absolute; /* Position absolutely within the card */
    bottom: 0; /* Align to the bottom */
    left: 0;
    right: 0;
    width: 100%; /* Take full width of the card */
    background-color: white; /* White background for regular picks */
    color: black; /* Black text for regular picks */
    font-size: 8px;
    font-weight: bold;
    padding: 3px 0; /* Padding top/bottom */
    border-bottom-left-radius: 8px; /* Match card border radius */
    border-bottom-right-radius: 8px; /* Match card border radius */
    text-align: center;
    box-sizing: border-box; /* Include padding in width */
}

/* Style for traded picks */
.draft-card.traded-pick .pick-owner {
    background-color: black; /* Black background for traded picks */
    color: white; /* White text for traded picks */
}

/* Player Pool */
.player-pool {
    grid-column: 1; /* Keep Player Pool in the first column */
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column; /* Stack children vertically */
    gap: 10px; /* Add space between direct children (h2, controls, player list) */
    padding: 15px; /* Increased padding for better spacing */
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    max-height: 80vh;
    display: block; /* Ensure it is visible */
    margin-bottom: 15px; /* Add space below the section */
    align-items: stretch; /* Stretch children to fill the container width */
}

/* Player Filter Controls */
.player-filter-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 0; /* Removed bottom margin here, gap on parent handles spacing */
    padding: 0; /* Removed padding here, padding on parent handles spacing */
    background-color: transparent; /* Remove background */
    border-radius: 0; /* Remove border radius */
    align-items: center;
    box-shadow: none; /* Remove box shadow */
}

#playerSearch {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#positionFilter {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 80px;
}

/* Player Cards Container */
.player-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 0; /* Removed padding here, padding on parent handles spacing */
}

/* Player Card */
.player-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 0; /* Removed bottom margin here, gap on parent handles spacing */
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease;
}

.player-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.rookie-player {
    border-left: 4px solid #28a745; /* Green border for rookie players */
}

.player-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.player-details {
    font-size: 12px;
    color: #555;
}

.player-details span {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 3px;
}

.player-position {
    background-color: #007bff;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
}

.player-team {
    background-color: #6c757d; /* Default gray for players not signed to a team */
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
}

.player-rookie {
    background-color: #28a745;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
}
/* Team-specific colors for player teams in player pool */
.player-team[data-team="ARI"] { background-color: #97233F; } /* Arizona Cardinals */
.player-team[data-team="ATL"] { background-color: #A71930; } /* Atlanta Falcons */
.player-team[data-team="BAL"] { background-color: #241773; } /* Baltimore Ravens */
.player-team[data-team="BUF"] { background-color: #00338D; } /* Buffalo Bills */
.player-team[data-team="CAR"] { background-color: #0085CA; } /* Carolina Panthers */
.player-team[data-team="CHI"] { background-color: #0B162A; } /* Chicago Bears */
.player-team[data-team="CIN"] { background-color: #FB4F14; } /* Cincinnati Bengals */
.player-team[data-team="CLE"] { background-color: #311D00; } /* Cleveland Browns */
.player-team[data-team="DAL"] { background-color: #041E42; } /* Dallas Cowboys */
.player-team[data-team="DEN"] { background-color: #FB4F14; } /* Denver Broncos */
.player-team[data-team="DET"] { background-color: #0076B6; } /* Detroit Lions */
.player-team[data-team="GB"] { background-color: #203731; } /* Green Bay Packers */
.player-team[data-team="HOU"] { background-color: #03202F; } /* Houston Texans */
.player-team[data-team="IND"] { background-color: #002C5F; } /* Indianapolis Colts */
.player-team[data-team="JAX"], .player-team[data-team="JAC"] { background-color: #006778; } /* Jacksonville Jaguars */
.player-team[data-team="KC"] { background-color: #E31837; } /* Kansas City Chiefs */
.player-team[data-team="LV"] { background-color: #000000; } /* Las Vegas Raiders */
.player-team[data-team="LAC"] { background-color: #0080C6; } /* Los Angeles Chargers */
.player-team[data-team="LAR"] { background-color: #003594; } /* Los Angeles Rams */
.player-team[data-team="MIA"] { background-color: #008E97; } /* Miami Dolphins */
.player-team[data-team="MIN"] { background-color: #4F2683; } /* Minnesota Vikings */
.player-team[data-team="NE"] { background-color: #002244; } /* New England Patriots */
.player-team[data-team="NO"] { background-color: #D3BC8D; color: #000000; } /* New Orleans Saints */
.player-team[data-team="NYG"] { background-color: #0B2265; } /* New York Giants */
.player-team[data-team="NYJ"] { background-color: #125740; } /* New York Jets */
.player-team[data-team="PHI"] { background-color: #004C54; } /* Philadelphia Eagles */
.player-team[data-team="PIT"] { background-color: #FFB612; color: #000000; } /* Pittsburgh Steelers */
.player-team[data-team="SF"] { background-color: #AA0000; } /* San Francisco 49ers */
.player-team[data-team="SEA"] { background-color: #002244; } /* Seattle Seahawks */
.player-team[data-team="TB"] { background-color: #D50A0A; } /* Tampa Bay Buccaneers */
.player-team[data-team="TEN"] { background-color: #4B92DB; } /* Tennessee Titans */
.player-team[data-team="WAS"] { background-color: #773141; } /* Washington Commanders */

/* No Results and Limit Messages */
.no-results, .limit-message {
    padding: 15px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

.limit-message {
    border-top: 1px dashed #dee2e6;
    margin-top: 10px;
}

/* Loading Indicator */
.loading {
    padding: 20px;
    text-align: center;
    color: #007bff;
    font-style: italic;
}

/* Player Pool Toggle Switch */
.player-pool-toggle {
    margin: 10px 0;
    display: flex;
    align-items: center;
    font-weight: bold;
    justify-content: center; /* Center the toggle horizontally */
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 0 10px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Additional styling for player pool control panel */
.player-pool-controls {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex; /* Use flexbox for controls */
    flex-direction: column; /* Stack controls vertically */
    align-items: center; /* Center controls horizontally */
    gap: 10px; /* Space between controls */
}

/* Style for the Draft Type Info span */
#draftBoard h2 #draft-type-info {
    display: inline-block;
    font-size: 0.75em;
    padding: 5px 10px;
    margin-left: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-weight: normal;
    color: #555;
    vertical-align: middle;
}