/* General page styling */
body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #e0e7ff 0%, #f0f4f8 100%); /* Light ice-blue gradient */
    color: #1a1a1a;
    margin: 0;
    padding: 20px;
    line-height: 1.6;
}

/* General table styling */
table {
    width: 100%; /* Full width for modern look */
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Softer shadow for depth */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensure border-radius applies to content */
    table-layout: fixed;
}

/* Header styling */
th {
    background: linear-gradient(90deg, #003087 0%, #0033a0 100%); /* NHL blue gradient */
    color: #ffffff;
    border-bottom: 2px solid #ffcd00; /* NHL gold accent */
    padding: 12px;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    height: 40px; /* Slightly taller for modern feel */
    vertical-align: middle;
    transition: background 0.3s ease; /* Smooth hover effect */
}

th:hover {
    background: linear-gradient(90deg, #00266f 0%, #002d8d 100%); /* Darker blue on hover */
}

/* Cell styling */
td {
    border-bottom: 1px solid #e0e0e0;
    padding: 12px;
    text-align: left;
    color: #1a1a1a;
    background-color: #ffffff;
    transition: background 0.3s ease; /* Smooth hover effect */
}

td:hover {
    background-color: #f5f7fa; /* Light hover effect */
}

/* Right-align numeric columns for Top Shooters */
#streaks-body tr td:nth-child(3), /* Shots/G */
#streaks-body tr td:nth-child(4), /* GP */
#streaks-body tr td:nth-child(5), /* Games 1+ Shots */
#streaks-body tr td:nth-child(6), /* % Games 1+ Shots */
#streaks-body tr td:nth-child(7), /* Games 2+ Shots */
#streaks-body tr td:nth-child(8), /* % Games 2+ Shots */
#streaks-body tr td:nth-child(9), /* Games 3+ Shots */
#streaks-body tr td:nth-child(10), /* % Games 3+ Shots */
#streaks-body tr td:nth-child(11), /* Games 4+ Shots */
#streaks-body tr td:nth-child(12) /* % Games 4+ Shots */ {
    text-align: right;
}

/* Right-align numeric columns for Shot Droughts */
#droughts-body tr td:nth-child(3), /* Shots/G */
#droughts-body tr td:nth-child(4), /* GP */
#droughts-body tr td:nth-child(5) /* Drought */ {
    text-align: right;
}

/* Sort indicator styling */
.sort-indicator {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: #ffcd00; /* NHL gold */
    transition: transform 0.3s ease;
}

th.sort-asc .sort-indicator {
    transform: rotate(0deg); /* Up arrow */
}

th.sort-desc .sort-indicator {
    transform: rotate(180deg); /* Down arrow */
}

/* Ensure table fits screen without extra width */
table {
    max-width: 100%;
    overflow-x: auto; /* Horizontal scroll for small screens */
}

/* Set specific column widths for Top Shooters (12 columns) */
#streaks-table th:nth-child(1), #streaks-table td:nth-child(1) { width: 18%; min-width: 120px; } /* Player */
#streaks-table th:nth-child(2), #streaks-table td:nth-child(2) { width: 5%; min-width: 60px; }  /* Team */
#streaks-table th:nth-child(3), #streaks-table td:nth-child(3) { width: 6%; min-width: 70px; }  /* Shots/G */
#streaks-table th:nth-child(4), #streaks-table td:nth-child(4) { width: 4%; min-width: 50px; }  /* GP */
#streaks-table th:nth-child(5), #streaks-table td:nth-child(5) { width: 6%; min-width: 70px; }  /* Games 1+ Shots */
#streaks-table th:nth-child(6), #streaks-table td:nth-child(6) { width: 8%; min-width: 90px; }  /* % Games 1+ Shots */
#streaks-table th:nth-child(7), #streaks-table td:nth-child(7) { width: 6%; min-width: 70px; }  /* Games 2+ Shots */
#streaks-table th:nth-child(8), #streaks-table td:nth-child(8) { width: 8%; min-width: 90px; }  /* % Games 2+ Shots */
#streaks-table th:nth-child(9), #streaks-table td:nth-child(9) { width: 6%; min-width: 70px; }  /* Games 3+ Shots */
#streaks-table th:nth-child(10), #streaks-table td:nth-child(10) { width: 8%; min-width: 90px; } /* % Games 3+ Shots */
#streaks-table th:nth-child(11), #streaks-table td:nth-child(11) { width: 6%; min-width: 70px; } /* Games 4+ Shots */
#streaks-table th:nth-child(12), #streaks-table td:nth-child(12) { width: 8%; min-width: 90px; } /* % Games 4+ Shots */

/* Set specific column widths for Shot Droughts (5 columns) */
#droughts-table th:nth-child(1), #droughts-table td:nth-child(1) { width: 35%; min-width: 150px; } /* Player */
#droughts-table th:nth-child(2), #droughts-table td:nth-child(2) { width: 15%; min-width: 70px; } /* Team */
#droughts-table th:nth-child(3), #droughts-table td:nth-child(3) { width: 20%; min-width: 90px; } /* Shots/G */
#droughts-table th:nth-child(4), #droughts-table td:nth-child(4) { width: 15%; min-width: 70px; } /* GP */
#droughts-table th:nth-child(5), #droughts-table td:nth-child(5) { width: 15%; min-width: 70px; } /* Drought */

/* Team-specific themes using CSS variables */
:root {
    --default-bg: #ffffff;
    --default-accent: #0033a0;
}

body[data-team="ANA"] { --team-bg: #F47A38; --team-accent: #B9975B; } /* Ducks: Orange & Gold */
body[data-team="BOS"] { --team-bg: #FFB81C; --team-accent: #000000; } /* Bruins: Yellow & Black */
body[data-team="BUF"] { --team-bg: #003087; --team-accent: #FFB81C; } /* Sabres: Blue & Gold */
body[data-team="CGY"] { --team-bg: #D2001C; --team-accent: #F1BE48; } /* Flames: Red & Yellow */
body[data-team="CAR"] { --team-bg: #CC0000; --team-accent: #000000; } /* Hurricanes: Red & Black */
body[data-team="CHI"] { --team-bg: #CF0A2C; --team-accent: #FF671F; } /* Blackhawks: Red & White */
body[data-team="COL"] { --team-bg: #6F263D; --team-accent: #A2AAAD; } /* Avalanche: Burgundy & Steel */
body[data-team="CBJ"] { --team-bg: #002654; --team-accent: #CE1126; } /* Blue Jackets: Blue & Red */
body[data-team="DAL"] { --team-bg: #006847; --team-accent: #FFFFFF; } /* Stars: Green & White */
body[data-team="DET"] { --team-bg: #CE1126; --team-accent: #FFFFFF; } /* Red Wings: Red & White */
body[data-team="EDM"] { --team-bg: #041E42; --team-accent: #FF4C00; } /* Oilers: Blue & Orange */
body[data-team="FLA"] { --team-bg: #C8102E; --team-accent: #B9975B; } /* Panthers: Red & Gold */
body[data-team="LAK"] { --team-bg: #111111; --team-accent: #A2AAAD; } /* Kings: Black & Silver */
body[data-team="MIN"] { --team-bg: #154734; --team-accent: #E03A3E; } /* Wild: Green & Red */
body[data-team="MTL"] { --team-bg: #AF1E2D; --team-accent: #192168; } /* Canadiens: Red & Blue */
body[data-team="NSH"] { --team-bg: #FFB81C; --team-accent: #041E42; } /* Predators: Gold & Navy */
body[data-team="NJD"] { --team-bg: #CE1126; --team-accent: #000000; } /* Devils: Red & Black */
body[data-team="NYI"] { --team-bg: #F47D30; --team-accent: #FFFFFF; } /* Islanders: Orange & White */
body[data-team="NYR"] { --team-bg: #0033A0; --team-accent: #CE1126; } /* Rangers: Blue & Red */
body[data-team="OTT"] { --team-bg: #C8102E; --team-accent: #FFFFFF; } /* Senators: Red & White */
body[data-team="PHI"] { --team-bg: #F74902; --team-accent: #000000; } /* Flyers: Orange & Black */
body[data-team="PIT"] { --team-bg: #FCB514; --team-accent: #000000; } /* Penguins: Gold & Black */
body[data-team="SJS"] { --team-bg: #006D75; --team-accent: #EA7200; } /* Sharks: Teal & Orange */
body[data-team="SEA"] { --team-bg: #001628; --team-accent: #99D9D9; } /* Kraken: Dark Blue & Light Blue */
body[data-team="STL"] { --team-bg: #002F87; --team-accent: #FCB514; } /* Blues: Blue & Yellow */
body[data-team="TBL"] { --team-bg: #002868; --team-accent: #FFFFFF; } /* Lightning: Blue & White */
body[data-team="TOR"] { --team-bg: #00205B; --team-accent: #FFFFFF; } /* Maple Leafs: Blue & White */
body[data-team="UTA"] { --team-bg: #041E42; --team-accent: #B9975B; } /* Utah Hockey Club: Blue & Gold (placeholder) */
body[data-team="VAN"] { --team-bg: #00843D; --team-accent: #FFFFFF; } /* Canucks: Green & White */
body[data-team="VGK"] { --team-bg: #B9975B; --team-accent: #000000; } /* Golden Knights: Gold & Black */
body[data-team="WSH"] { --team-bg: #041E42; --team-accent: #C8102E; } /* Capitals: Blue & Red */
body[data-team="WPG"] { --team-bg: #041E42; --team-accent: #AC162C; } /* Jets: Blue & Red */

body {
    background-color: var(--default-bg, #ffffff);
    --current-team-bg: var(--default-bg);
    --current-team-accent: var(--default-accent);
}

body[data-team]:not([data-team="all"]) {
    background: linear-gradient(135deg, var(--current-team-bg, #e0e7ff) 0%, #f0f4f8 100%);
}

#season, h2 {
    background: linear-gradient(90deg, var(--current-team-accent, #0033a0) 0%, #003087 100%);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

#team-filter, #player-search {
    margin: 10px 0;
    padding: 10px;
    font-size: 14px;
    border: 2px solid var(--current-team-accent, #0033a0);
    border-radius: 6px;
    background-color: #ffffff;
    color: #1a1a1a;
    width: 250px;
    transition: border-color 0.3s ease;
}

#team-filter:focus, #player-search:focus {
    border-color: #ffcd00; /* NHL gold on focus */
    outline: none;
}

label {
    color: var(--current-team-accent, #0033a0);
    font-weight: 600;
    margin-right: 10px;
}

#loading {
    display: none;
    font-style: italic;
    color: #666666;
    text-align: center;
    margin: 20px 0;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 6px;
}

#loading.active {
    display: block;
}

/* Responsive design for smaller screens */
@media screen and (max-width: 768px) {
    th, td {
        padding: 6px;
        font-size: 12px;
    }
    table {
        font-size: 12px;
    }
    #streaks-table th:nth-child(1), #streaks-table td:nth-child(1) { width: 22%; min-width: 100px; }
    #streaks-table th:nth-child(2), #streaks-table td:nth-child(2) { width: 8%; min-width: 50px; }
    #streaks-table th:nth-child(3), #streaks-table td:nth-child(3) { width: 8%; min-width: 60px; }
    #streaks-table th:nth-child(4), #streaks-table td:nth-child(4) { width: 6%; min-width: 40px; }
    #streaks-table th:nth-child(5), #streaks-table td:nth-child(5) { width: 8%; min-width: 60px; }
    #streaks-table th:nth-child(6), #streaks-table td:nth-child(6) { width: 10%; min-width: 80px; }
    #streaks-table th:nth-child(7), #streaks-table td:nth-child(7) { width: 8%; min-width: 60px; }
    #streaks-table th:nth-child(8), #streaks-table td:nth-child(8) { width: 10%; min-width: 80px; }
    #streaks-table th:nth-child(9), #streaks-table td:nth-child(9) { width: 8%; min-width: 60px; }
    #streaks-table th:nth-child(10), #streaks-table td:nth-child(10) { width: 10%; min-width: 80px; }
    #streaks-table th:nth-child(11), #streaks-table td:nth-child(11) { width: 8%; min-width: 60px; }
    #streaks-table th:nth-child(12), #streaks-table td:nth-child(12) { width: 10%; min-width: 80px; }
    #droughts-table th:nth-child(1), #droughts-table td:nth-child(1) { width: 35%; min-width: 150px; }
    #droughts-table th:nth-child(2), #droughts-table td:nth-child(2) { width: 15%; min-width: 60px; }
    #droughts-table th:nth-child(3), #droughts-table td:nth-child(3) { width: 20%; min-width: 80px; }
    #droughts-table th:nth-child(4), #droughts-table td:nth-child(4) { width: 15%; min-width: 60px; }
    #droughts-table th:nth-child(5), #droughts-table td:nth-child(5) { width: 15%; min-width: 60px; }
}

/* JavaScript to update team theme dynamically */
<script>
document.getElementById('team-filter').addEventListener('change', function() {
    document.body.setAttribute('data-team', this.value);
    const teamBg = getComputedStyle(document.documentElement).getPropertyValue(`--${this.value}-bg`) || getComputedStyle(document.documentElement).getPropertyValue('--default-bg');
    const teamAccent = getComputedStyle(document.documentElement).getPropertyValue(`--${this.value}-accent`) || getComputedStyle(document.documentElement).getPropertyValue('--default-accent');
    document.documentElement.style.setProperty('--current-team-bg', teamBg);
    document.documentElement.style.setProperty('--current-team-accent', teamAccent);
});
</script>