

<!DOCTYPE html>
<html>
<head>
    <title>HIT+64 Statistics</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .containerSpace {
            height: 20px;
        }
        
        .mainContainer {
            margin-top: 20px;
            margin-bottom: 40px;
        }
        
        .card {
            background-color: rgba(1, 57, 87, 0.7) !important;
            border-left: 2px solid #014970 !important;
            border-right: 2px solid #014970 !important;
            border-bottom: 2px solid #014970 !important;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .card-header {
            background-color: #2c2f33;
            border-bottom: 1px solid #40444b;
            padding: 15px 20px;
        }
        
        .card-header h2 {
            margin: 0;
            font-size: 1.5rem;
            color: #ffffff;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .chart-container {
            height: 300px;
            margin-bottom: 20px;
            position: relative;
        }
        
        .table-container {
            margin-top: 30px;
        }
        
        .sort-buttons {
            display: flex;
            gap: 8px;
            margin-bottom: 15px;
            flex-wrap: wrap;
            padding-top: 15px;
        }
        
        .sort-buttons button {
            padding: 5px 12px;
            font-size: 12px;
            background-color: #2c2f33;
            border: 1px solid #40444b;
            color: #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .sort-buttons button:hover {
            background-color: #40444b;
            border-color: #5c5f66;
        }
        
        .sort-buttons button .indicator {
            margin-left: 5px;
            font-size: 10px;
        }
        
        .table {
            background-color: #1e2124;
            color: #e0e0e0;
            margin-bottom: 0;
        }
        
        .table thead th {
            background-color: #2c2f33;
            border-color: #40444b;
            color: #ffffff;
            font-weight: 600;
        }
        
        .table tbody td {
            border-color: #40444b;
            vertical-align: middle;
            color: white !important;
        }
        
        .table-striped>tbody>tr:nth-of-type(odd) {
            background-color: #25282c;
        }
        
        .table-responsive {
            overflow-x: auto;
        }
        
        @media (max-width: 768px) {
            .chart-container {
                height: 250px;
            }
            
            .sort-buttons button {
                font-size: 10px;
                padding: 3px 8px;
            }
            
            .table th, .table td {
                font-size: 11px;
                color: white !important;
            }
            
            .card-header h2 {
                font-size: 1.2rem;
            }
        }
        
        h3 {
            font-size: 1.1rem;
            margin-bottom: 15px;
            color: #ffffff;
            text-align: center;
        }
        
        .chart-wrapper {
            background-color: #1e2124;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            height: 100%;
        }
        
        .row.equal-height {
            display: flex;
            flex-wrap: wrap;
        }
        
        .row.equal-height > [class*='col-'] {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to HIT+64</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
            <style>
            
            
/* Universal Styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}
            
            
* a:hover {
color: goldenrod !important;
}

/* Background Image on html */
html {
    background-image: url("../../inc/imgr/h64background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 90% 90%; 
    background-position: center -100%;
    background-color: #020c18 !important; /* Corrected background color */
    color: white !important;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Ensure body does not have a white background */
body {
    background-color: transparent !important; /* Transparent background */
    height: 100%; /* Full page height */
}

            
/* Logo styling */
.logo {
    max-width: 8.5vh;
    max-height: 5.5vh;
    margin-right: 5px;
}

/* Font-face settings */
@font-face {
    font-family: "toxi", "Chopsic";
    src: url(inc/fonts/toxi.ttf) format("truetype");
    src: url(inc/fonts/Chopsic.ttf) format("truetype");
}

/* Universal font setting */
* {
    font-family: "toxi", Verdana, Tahoma !important;
}

/* Navbar styling */
.navbar-brand {
    font-family: "Chopsic", Verdana, Tahoma !important;
    color: white !important;
}

.nav-link {
    color: white !important;
}

/* Full Container for UCP */
.fullContain {
    position: relative; /* Reference point for absolute positioning */
    width: 100%;
    min-height: 50vh; /* Ensure a minimum height */
    padding: 10px; /* Add some padding for inner spacing */
    box-sizing: border-box; /* Ensure padding does not affect width */
}

/* Space Between Navbar and Main Container */
.containerSpace {
    height: 20px; /* Adjust space between nav and main container */
}

/* Control Panel Styling */
.control-panel {
    position: absolute; /* Fixed positioning inside .fullContain */
    top: 15%; /* Align to top */
    right: 50px;
    width: 650px;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    z-index: 1000;
    transition: width 0.3s ease, right 0.3s ease; /* Ensure smooth transition for both width and position */
}

/* Control Panel Responsiveness */
@media (max-width: 1200px) {
    .control-panel {
        width: 650px; /* Slightly reduce the width on smaller large screens */
        right: 10%; /* Adjust the position to keep some space */
    }
}

@media (max-width: 1000px) {
    .control-panel {
        width: 80%; /* Increase width slightly on medium-sized screens */
        right: 5%;
    }
}

@media (max-width: 800px) {
    .control-panel {
        right: 0 !important;
        min-width: 300px;
        width: 100%; /* Make it full width for smaller screens */
    }
}

@media (max-width: 600px) {
    .control-panel {
        width: 100%; /* Full width on very small screens */
        right: 0;
        top: 10%; /* Adjust the vertical position for better view */
        border-radius: 0; /* Remove the rounded corners for mobile-friendly design */
    }
    
    .fullContain {
        min-height: 80vh; /* Make sure the container takes full height on mobile */
    }
    
    .containerSpace {
        height: 10px; /* Reduce space between navbar and main content on small screens */
    }
    
    .control-panel a {
        font-size: 2vw;
    }
    
    .card .border-custom {
        width: 120%;
        margin-left: -28.5px;
    }
    
    .news-post {
        width: 125%;
        margin-left: -28.5px;
    }
    
    #levelContentContainer{
        width: 120%;
        margin-left: -28.5px;
    }
}

/* Optional: Adding Flexbox for better alignment inside the control panel (Optional) */
.control-panel .innerContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
}

/* Ensure Text and Elements inside .control-panel scale down */
.control-panel h1, .control-panel p {
    font-size: 16px; /* Adjust font size for smaller screens */
}

@media (max-width: 400px) {
    .control-panel h1, .control-panel p {
        font-size: 14px; /* Smaller font size on very small screens */
    }
}

            
/* Main Content Styling */
.mainContainer {
    padding-top: 20px; /* Adjust space from navbar */
}

            
            .show{
                background-color: #222222 !important;
                border-color: white;
                color: lightblue !important;
            }
            
            .show a.dropdown-item{
                color: lightblue !important;
            }

            
            .dropdown-divider {
                border-top: 1px solid white !important;  
            }


/* Header with Banner Image */
.control-panel-header {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

.banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Profile Picture Section */
.profile-container {
    text-align: center;
    margin-top: -50px;
    position: relative;
    padding: 5px;
}

.profile-img-container {
    position: relative;
    width: 90px; /* Adjust size for profile image */
    height: 90px;
    margin: 0 auto;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Profile Picture Border Image (overlay on top) */
.profile-img-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0; /* No rounding for the border */
    background-image: url('../../inc/imgr/pfpborder.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Username Text */
h4 {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

/* Navigation Links */
.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* This will make the list items inline */
    justify-content: space-between; /* Distribute space between the items */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
}

.nav-item {
    margin: 0 10px; /* Add horizontal spacing between items */
}

.nav-link {
    color: #f0f0f0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    display: block;
    padding: 10px;
    border-radius: 5px;
}

.nav-link:hover {
    background-color: #333;
    color: #007bff;
}

/* Optional: Add some spacing between links */
.nav-item a {
    padding: 10px;
    display: block;
    border-radius: 5px;
}


.control-panel .cpLoggedOut {
    padding: 5px !important;
}

.control-panel .loggedOut {
    margin-top: -25px !important;
}

.control-panel .loggedOut li {
    margin-left: auto !important;
    margin-right: auto !important;
}

.nav-link {
    color: #f0f0f0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    display: block;
}

.nav-link:hover {
    background-color: #333;
    border-radius: 5px;
    color: #007bff;
}

/* Additional Styling for Links */
.nav-item a {
    padding: 10px;
    display: block;
    border-radius: 5px;
    z-index: 9999 !important;
}

table {
    background-color: #495057;
    color: #f8f9fa;
}
.news-section {
    background-color: #212529;
    padding: 10px;
    border-radius: 5px;
}
            
/* Main content section */
.content {
    min-height: 100%;  /* Content should take full height */
    padding-bottom: 75px;  /* Prevent overlap with footer */
}

/* Footer Styles - FIXED to the bottom of the page */
#footer {
    position: fixed !important;  /* Fix the footer to the bottom of the screen */
    bottom: 0;  /* Stick it to the bottom */
    left: 0;  /* Align it with the left edge */
    width: 100%;  /* Full width */
    background-color: #333;  /* Dark background */
    color: white;  /* White text */
    text-align: center;
    padding: 15px;
    z-index: 9999 !important;  /* Ensure it stays above other content */
}

/* Optional: Styling links in the footer */
#footer a {
    color: lightblue;
    text-decoration: none;
}

#footer a:hover {
    color: cyan;
}
            
            .formContainer {
                min-height: 25vh;
            }
            
            .scoreContainer {
                min-height: 40vh;
            }
            
            .navbar {
                background-color: rgba(1, 57, 87, 0.7) !important;
                border-left: 2px solid #014970 !important;
                border-right: 2px solid #014970 !important;
                border-bottom: 2px solid #014970 !important;
                text-shadow: 2px 2px 8px #000000 !important;
            }
            
            
.card {
    background-color: #1f1f1f;
    border: 1px solid #333;
    border-radius: 10px;
}

.table {
    background-color: #2a2a2a;
    color: #fff;
}

.table th,
.table td {
    vertical-align: middle;
}

.table th {
    background-color: #333;
    color: #fff;
}

.container-fluid {
    padding-top: 20px;
}

.card-header {
    background-color: #333;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
}
            
            .card-body {
                color: white !important;
            }

/* Border and background styling for Recent Submissions and Main Information */
.recent-submissions, .main-information {
    background-color: rgba(1, 57, 87, 0.7) !important;
    border-left: 2px solid #014970 !important;
    border-right: 2px solid #014970 !important;
    border-bottom: 2px solid #014970 !important;
    text-shadow: 2px 2px 8px #000000 !important;
    overflow: hidden;
}

.border-custom {
    border: 2px solid #555;
    border-radius: 10px;
    padding: 20px;
}

.news-column {
    padding-right: 20px;
}

.news-post {
    background-color: #2c2c2c;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
}

.right-align {
    text-align: right;
}

.score-header {
    font-size: 1.2rem;
    font-weight: bold;
}
            
            .hAdjust {
                margin-top: -25px;
                background-color: rgba(0,0,0,0.6);
                width: 120%;
                margin-left: -20px;
                padding-top: 10px;
                
            }
            
/* Scrollbar track (background of the scrollbar) */
::-webkit-scrollbar {
    width: 8px;  /* Set the width of the scrollbar */
}

/* Scrollbar thumb (the draggable part of the scrollbar) */
::-webkit-scrollbar-thumb {
    background-color: #014970;  /* Red color for the thumb */
    border-radius: 10px;  /* Rounded edges for the thumb */
}

/* Hover state for the scrollbar thumb (to make it darker when hovered) */
::-webkit-scrollbar-thumb:hover {
    background-color: #a6e7ff;  /* Darker red when hovered */
}

/* Scrollbar track (area behind the thumb) */
::-webkit-scrollbar-track {
    background-color: #2a2a2a;  /* Dark background for the track */
    border-radius: 10px;  /* Rounded edges for the track */
}

/* Optional: Scrollbar corner (bottom-right corner where two scrollbars meet) */
::-webkit-scrollbar-corner {
    background-color: #2a2a2a;  /* Dark color to match the track */
}
            
            
        </style>
    <style>
        
/* Ensure the link stays inline and aligns content properly */
.nav-link {
    display: inline-flex !important;  /* Keep text and dot on the same line */
    align-items: center !important;   /* Vertically align "LIVE" text and dot */
    text-decoration: none !important;  /* Remove underline */
}

/* Style for the "LIVE" text */
.live-text {
    font-weight: bold !important;
    color: #ff0000 !important;  /* Red color for "LIVE" */
    font-size: 16px !important; /* Adjust font size */
    margin-right: 10px !important; /* Space between text and dot */
    display: inline !important;   /* Make sure it's inline */
}

/* Style for the animated red recording dot */
.live-dot {
    display: inline-block !important;
    width: 12px !important;    /* Size of the dot */
    height: 12px !important;   /* Size of the dot */
    background-color: red !important;
    border-radius: 50% !important; /* Make it circular */
    animation: blink 1s infinite ease-in-out !important; /* Blinking effect */
    
    /* Vendor prefixes for broader support */
    -webkit-animation: blink 1s infinite ease-in-out !important; /* Safari and older Chrome versions */
    -moz-animation: blink 1s infinite ease-in-out !important; /* Firefox */
    -o-animation: blink 1s infinite ease-in-out !important; /* Opera */
    -ms-animation: blink 1s infinite ease-in-out !important; /* Older Internet Explorer */
}

/* Keyframes for the blinking animation */
@keyframes blink {
    0% {
        opacity: 0.5 !important; /* Make dot slightly dim at the start */
    }
    50% {
        opacity: 1 !important; /* Full brightness halfway */
    }
    100% {
        opacity: 0.5 !important; /* Return to dim at the end */
    }
}

/* Vendor prefixed @keyframes for browser support */
@-webkit-keyframes blink {
    0% {
        opacity: 0.5 !important;
    }
    50% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0.5 !important;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0.5 !important;
    }
    50% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0.5 !important;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 0.5 !important;
    }
    50% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0.5 !important;
    }
}

@-ms-keyframes blink {
    0% {
        opacity: 0.5 !important;
    }
    50% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0.5 !important;
    }
}

/* ----- NEW: Loading state for the LIVE link ----- */
.loading-text {
    color: #ffcc00 !important;      /* Bright yellow */
    font-weight: bold !important;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}
    
    .control-panel {
        z-index: 0 !important;
    }
    
    </style>
</head>

<body>
    <!--
-->
    
    <nav class='navbar navbar-expand-lg bg-dark'>
      <div class='container-fluid'>
        <a class='navbar-brand' href='../../index.cfm'><img src='../../inc/imgr/h64logo.png' class='logo'></a>
        <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>
          <span class='navbar-toggler-icon'></span>
        </button>
        <div class='collapse navbar-collapse' id='navbarSupportedContent'>
          <ul class='navbar-nav me-auto mb-2 mb-lg-0'>
            <li class='nav-item'>
              <a class='nav-link active' aria-current='page' href='../../index.cfm'>Home</a>
            </li>
              
            <li class='nav-item'>
                <a class='nav-link' href='../../SFS2/'>SFS2</a>
            </li>
              
            
            <li class='nav-item'>
              <a class='nav-link' href='../../rules.cfm'>Rules</a>
            </li>

            <li class='nav-item dropdown' style="z-index: 999 !important;">
              <a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
                Community
              </a>
                <ul class='dropdown-menu' style="z-index: 999 !important;">
                        <li><a class='dropdown-item' href='../../about.cfm'>About HIT+64</a></li>
                        <li><a class='dropdown-item' href='../../runners.cfm'>Score Runners</a></li>
                        <li><a class='dropdown-item' href='../../achievements.cfm'>Achievements</a></li>
                </ul>
            </li>
              
            <li class='nav-item dropdown' style="z-index: 999 !important;">
              <a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
                Tools & Resources
              </a>
                <ul class='dropdown-menu' style="z-index: 999 !important;">
                        <li><a class='dropdown-item' href='../../tutorials.cfm'>Tutorials</a></li>
                        <li><a class='dropdown-item' href='../../guides/index.cfm'>Guides & Getting Started</a></li>
                        <li><hr class='dropdown-divider'></li>
                        <li><a class='dropdown-item' href='../../scoretracker.cfm'>Score Tracker</a></li>
                        <li><a class='dropdown-item' href='../../compare.cfm'>Score Comparer</a></li>
                        <li><hr class='dropdown-divider'></li>
                        <li><a class='dropdown-item' href='../../routepicker.cfm'>Random Route Selector</a></li>
                        <li><hr class='dropdown-divider'></li>
                        <li><a class='dropdown-item' href='../../stats.cfm'>Submission Statistics</a></li>
                        <li><hr class='dropdown-divider'></li>
                        <li><a class='dropdown-item' href='https://docs.google.com/spreadsheets/d/1QC6CGIwdm_31ATCUGWDqdbm0OUDEx8YgLNMkiNuKot8/edit?usp=sharing'>Gameshark Codes</a></li>
                </ul>
            </li>
              
            <li class='nav-item dropdown' style="z-index: 999 !important;">
              <a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
                Leaderboards
              </a>
                <ul class='dropdown-menu' style="z-index: 999 !important;">
                    
                        <li><a class='dropdown-item' href='../../leaderboards.cfm?level=total'>Standard Leaderboards</a></li>
                        <li><a class='dropdown-item' href='../../pcboards.cfm?level=total'>Starship/PCPort Leaderboards</a></li>
                        <li><hr class='dropdown-divider'></li>
                        <li><a class='dropdown-item' href='../../legacyboards.cfm?level=total'>Infinites Allowed Leaderboards</a></li>
                        <li><hr class='dropdown-divider'></li>
                        <li><a class='dropdown-item' href='../../speedboards.cfm'>2k% Speedruns</a></li>
                    
                </ul>
            </li>
                        
            <li class='nav-item dropdown' style="z-index: 999 !important;">
              <a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
                M.L. Archive
              </a>
                <ul class='dropdown-menu' style="z-index: 999 !important;">
                    <li><a class='dropdown-item' href='../../mlarchive.cfm'>2024</a></li>
                    <li><a class='dropdown-item' href='../../mlarchive.cfm?year=2025&?month=jan'>2025</a></li>
                    <li><a class='dropdown-item' href='../../mlarchive.cfm?year=2026&?month=jan'>2026</a></li>
                </ul>
            </li>
            
                        
            <li class='nav-item dropdown'>
              <a class='nav-link dropdown-toggle' href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'>
                Fun Projects
              </a>
              <ul class='dropdown-menu'>
                <li style="margin-left: 5%; color: red;">***USE AT YOUR OWN RISK!***</li>
                <li><hr class='dropdown-divider'></li>
                <li><a class='dropdown-item' href='https://github.com/livvydoodlez/Star-Fox-64-Randomizer'>Livvydoodlez' Randomizer</a></li>
                <li><a class='dropdown-item' href='https://github.com/punk7890/Star-Fox-64-Randomizer'>Punk7890's Randomizer ROM Patch</a></li>
                <li><hr class='dropdown-divider'></li>
                <li><a class='dropdown-item' href='https://github.com/HarbourMasters/Starship'>Harbour Master's Starship</a></li>
                <li><a class='dropdown-item' href='https://github.com/sonicdcer/Starfox64Recomp'>Sonic Dreamcaster's Recompliation</a></li>
                <li><hr class='dropdown-divider'></li>
                <li><a class='dropdown-item' href='https://gamebanana.com/wips/90597'>Maddi's Graphic Overhaul</a></li>
              </ul>
            </li>
                        
                        
            <li class='nav-item'>
              <a class='nav-link' href='../../watch.cfm'>Watch</a>
            </li>

            
          </ul>
            
        <div class='navbar-collapse collapse w-100 order-3 dual-collapse2'>
            <ul class='navbar-nav ms-auto'>

            
                        <li class='nav-item'>
                            <a class='nav-link' href='../../changelog.cfm'>Changelog</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href='https://discord.gg/MYVyYNf' target='_blank'>Discord</a>
                        </li>
                    

            </ul>
        </div>
            
            
        </div>
      </div>
    </nav>

    
    <!-- NEW: LIVE link loading feedback script -->
    <script>
    $(document).ready(function() {
        // Find the LIVE link (the one containing .live-text)
        var liveLink = $('a.nav-link:has(.live-text)');
        if (liveLink.length) {
            liveLink.on('click', function(e) {
                // Replace content with "Loading Streamers…" + yellow pulsing text + spinner
                $(this).html(`
                    <span class="loading-text">Loading Streamers…</span>
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                `);
                // Prevent double-clicks by disabling pointer events (optional)
                $(this).css('pointer-events', 'none');
            });
        }
    });
    </script>

</body>
</html>

<div class="fullContain scoreContainer">
    

    <!-- User is not logged in -->
    
        <div class="control-panel">
            <!-- Control Panel Header with Banner Image -->
            <div class="control-panel-header cpLoggedOut">
                <h4>You are currently not logged in!</h4>
            </div>
            <center>
            <ul class="nav loggedOut">
                <li class="nav-item">
                    <a href="../../inc/cfconfig/login.cfm" class="nav-link">Login</a>
                </li>
                <li class="nav-item">
                    <a href="../../inc/cfconfig/register.cfm" class="nav-link">Register</a>
                </li>
            </ul>
            </center>
        </div>
    

</div>

<div class="containerSpace"></div>

<div class="container-flex mainContainer">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h2>HIT+64 Statistics</h2>
            </div>
            <div class="card-body">
                
                <!-- Charts Section - Side by Side Layout -->
                <div class="row equal-height">
                    <!-- LEFT SIDE: Route Charts (3 charts side by side) -->
                    <div class="col-md-6">
                        <h3 style="text-align: left; margin-bottom: 20px;">Route Statistics</h3>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="chart-wrapper">
                                    <h3>Normal Submissions</h3>
                                    <div class="chart-container">
                                        <canvas id="routesNormalChart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="chart-wrapper">
                                    <h3>Expert Submissions</h3>
                                    <div class="chart-container">
                                        <canvas id="routesExpertChart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="chart-wrapper">
                                    <h3>Single Life Submissions</h3>
                                    <div class="chart-container">
                                        <canvas id="routesSingleLifeChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- RIGHT SIDE: Individual Level Charts (2 charts side by side) -->
                    <div class="col-md-6">
                        <h3 style="text-align: left; margin-bottom: 20px;">Individual Level Statistics</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="chart-wrapper">
                                    <h3>Normal Submissions</h3>
                                    <div class="chart-container">
                                        <canvas id="ilsNormalChart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="chart-wrapper">
                                    <h3>Expert Submissions</h3>
                                    <div class="chart-container">
                                        <canvas id="ilsExpertChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Tables Section -->
                <div class="row table-container">
                    <!-- LEFT SIDE: Routes Table -->
                    <div class="col-md-6">
                        <div class="sort-buttons">
                            <button onclick="toggleSort('routesTable', 0)">Route # <span class="indicator" id="routesTable-0-indicator"></span></button>
                            <button onclick="toggleSort('routesTable', 2)">Normal Avg <span class="indicator" id="routesTable-2-indicator"></span></button>
                            <button onclick="toggleSort('routesTable', 3)">Expert Avg <span class="indicator" id="routesTable-3-indicator"></span></button>
                            <button onclick="toggleSort('routesTable', 4)">Single-Life Avg <span class="indicator" id="routesTable-4-indicator"></span></button>
                            <button onclick="toggleSort('routesTable', 5)">Normal Submissions <span class="indicator" id="routesTable-5-indicator"></span></button>
                            <button onclick="toggleSort('routesTable', 6)">Expert Submissions <span class="indicator" id="routesTable-6-indicator"></span></button>
                            <button onclick="toggleSort('routesTable', 7)">Single-Life Submissions <span class="indicator" id="routesTable-7-indicator"></span></button>
                            <button onclick="toggleSort('routesTable', 8)">Total Submissions <span class="indicator" id="routesTable-8-indicator"></span></button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered" id="routesTable">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Route</th>
                                        <th>Normal Avg</th>
                                        <th>Expert Avg</th>
                                        <th>Single-Life Avg</th>
                                        <th>Normal Submissions</th>
                                        <th>Expert Submissions</th>
                                        <th>Single-Life Submissions</th>
                                        <th>Total Submissions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                        
                                            <tr>
                                                <td>1</td>
                                                <td>CoMeFoSXTiBoV1</td>
                                                <td>1737.80</td>
                                                <td>1001.00</td>
                                                <td>1780.29</td>
                                                <td>5</td>
                                                <td>1</td>
                                                <td>14</td>
                                                <td>20</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>2</td>
                                                <td>CoMeFoSXMaBoV1</td>
                                                <td>2024.33</td>
                                                <td>0.00</td>
                                                <td>2280.20</td>
                                                <td>3</td>
                                                <td>0</td>
                                                <td>5</td>
                                                <td>8</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>3</td>
                                                <td>CoMeFoSXMaA6V2</td>
                                                <td>2051.67</td>
                                                <td>0.00</td>
                                                <td>2177.70</td>
                                                <td>3</td>
                                                <td>0</td>
                                                <td>10</td>
                                                <td>13</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>4</td>
                                                <td>CoMeFoSXSZBoV1</td>
                                                <td>1596.00</td>
                                                <td>0.00</td>
                                                <td>1796.80</td>
                                                <td>3</td>
                                                <td>0</td>
                                                <td>5</td>
                                                <td>8</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>5</td>
                                                <td>CoMeFoSXSZA6V2</td>
                                                <td>1348.33</td>
                                                <td>0.00</td>
                                                <td>2198.60</td>
                                                <td>3</td>
                                                <td>0</td>
                                                <td>5</td>
                                                <td>8</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>6</td>
                                                <td>CoMeFoSoMaBoV1</td>
                                                <td>1609.50</td>
                                                <td>0.00</td>
                                                <td>2269.25</td>
                                                <td>2</td>
                                                <td>0</td>
                                                <td>4</td>
                                                <td>6</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>7</td>
                                                <td>CoMeFoSoMaA6V2</td>
                                                <td>2076.00</td>
                                                <td>0.00</td>
                                                <td>2200.75</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>4</td>
                                                <td>5</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>8</td>
                                                <td>CoMeKaSXTiBoV1</td>
                                                <td>1870.00</td>
                                                <td>0.00</td>
                                                <td>2511.25</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>4</td>
                                                <td>5</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>9</td>
                                                <td>CoMeKaSXMaBoV1</td>
                                                <td>2463.50</td>
                                                <td>0.00</td>
                                                <td>2336.60</td>
                                                <td>2</td>
                                                <td>0</td>
                                                <td>5</td>
                                                <td>7</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>10</td>
                                                <td>CoMeKaSXMaA6V2</td>
                                                <td>2219.33</td>
                                                <td>2423.00</td>
                                                <td>2251.66</td>
                                                <td>122</td>
                                                <td>6</td>
                                                <td>44</td>
                                                <td>172</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>11</td>
                                                <td>CoMeKaSXSZBoV1</td>
                                                <td>1811.00</td>
                                                <td>0.00</td>
                                                <td>2273.75</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>4</td>
                                                <td>5</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>12</td>
                                                <td>CoMeKaSXSZA6V2</td>
                                                <td>2237.00</td>
                                                <td>0.00</td>
                                                <td>2130.20</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>10</td>
                                                <td>11</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>13</td>
                                                <td>CoMeKaSoMaBoV1</td>
                                                <td>2081.00</td>
                                                <td>0.00</td>
                                                <td>2167.00</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>6</td>
                                                <td>7</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>14</td>
                                                <td>CoMeKaSoMaA6V2</td>
                                                <td>2995.50</td>
                                                <td>0.00</td>
                                                <td>2236.33</td>
                                                <td>2</td>
                                                <td>0</td>
                                                <td>6</td>
                                                <td>8</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>15</td>
                                                <td>CoSYKaSXTiBoV1</td>
                                                <td>2059.00</td>
                                                <td>0.00</td>
                                                <td>2176.75</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>4</td>
                                                <td>5</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>16</td>
                                                <td>CoSYKaSXMaBoV1</td>
                                                <td>2050.00</td>
                                                <td>0.00</td>
                                                <td>2460.20</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>5</td>
                                                <td>6</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>17</td>
                                                <td>CoSYKaSXMaA6V2</td>
                                                <td>2310.00</td>
                                                <td>0.00</td>
                                                <td>2378.50</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>4</td>
                                                <td>5</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>18</td>
                                                <td>CoSYKaSXSZBoV1</td>
                                                <td>1723.00</td>
                                                <td>0.00</td>
                                                <td>1842.25</td>
                                                <td>2</td>
                                                <td>0</td>
                                                <td>12</td>
                                                <td>14</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>19</td>
                                                <td>CoSYKaSXSZA6V2</td>
                                                <td>1620.67</td>
                                                <td>0.00</td>
                                                <td>2051.00</td>
                                                <td>3</td>
                                                <td>0</td>
                                                <td>7</td>
                                                <td>10</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>20</td>
                                                <td>CoSYKaSoMaBoV1</td>
                                                <td>1773.50</td>
                                                <td>1213.00</td>
                                                <td>2251.20</td>
                                                <td>2</td>
                                                <td>1</td>
                                                <td>5</td>
                                                <td>8</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>21</td>
                                                <td>CoSYKaSoMaA6V2</td>
                                                <td>2090.00</td>
                                                <td>0.00</td>
                                                <td>2305.20</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>5</td>
                                                <td>6</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>22</td>
                                                <td>CoSYAqZoMaBoV1</td>
                                                <td>0.00</td>
                                                <td>2963.65</td>
                                                <td>2547.11</td>
                                                <td>0</td>
                                                <td>20</td>
                                                <td>9</td>
                                                <td>28</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>23</td>
                                                <td>CoSYAqZoMaA6V2</td>
                                                <td>2285.40</td>
                                                <td>2503.27</td>
                                                <td>2068.06</td>
                                                <td>30</td>
                                                <td>11</td>
                                                <td>16</td>
                                                <td>55</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>24</td>
                                                <td>CoSYAqZoSZBoV1</td>
                                                <td>2200.00</td>
                                                <td>0.00</td>
                                                <td>2305.00</td>
                                                <td>1</td>
                                                <td>0</td>
                                                <td>3</td>
                                                <td>4</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>25</td>
                                                <td>CoSYAqZoSZA6V2</td>
                                                <td>2190.25</td>
                                                <td>0.00</td>
                                                <td>2138.40</td>
                                                <td>4</td>
                                                <td>0</td>
                                                <td>10</td>
                                                <td>14</td>
                                            </tr>
                                        
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- RIGHT SIDE: Individual Levels Table -->
                    <div class="col-md-6">
                        <div class="sort-buttons">
                            <button onclick="toggleSort('ilsTable', 0)">Level <span class="indicator" id="ilsTable-0-indicator"></span></button>
                            <button onclick="toggleSort('ilsTable', 1)">Normal Avg <span class="indicator" id="ilsTable-1-indicator"></span></button>
                            <button onclick="toggleSort('ilsTable', 2)">Expert Avg <span class="indicator" id="ilsTable-2-indicator"></span></button>
                            <button onclick="toggleSort('ilsTable', 3)">Normal Submissions <span class="indicator" id="ilsTable-3-indicator"></span></button>
                            <button onclick="toggleSort('ilsTable', 4)">Expert Submissions <span class="indicator" id="ilsTable-4-indicator"></span></button>
                            <button onclick="toggleSort('ilsTable', 5)">Total Submissions <span class="indicator" id="ilsTable-5-indicator"></span></button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered" id="ilsTable">
                                <thead>
                                    <tr>
                                        <th>Level</th>
                                        <th>Normal Avg</th>
                                        <th>Expert Avg</th>
                                        <th>Normal Submissions</th>
                                        <th>Expert Submissions</th>
                                        <th>Total Submissions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                        
                                            <tr>
                                                <td>Co</td>
                                                <td>283.02</td>
                                                <td>338.73</td>
                                                <td>53</td>
                                                <td>30</td>
                                                <td>83</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>Me</td>
                                                <td>502.95</td>
                                                <td>562.75</td>
                                                <td>57</td>
                                                <td>4</td>
                                                <td>61</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>A6</td>
                                                <td>618.71</td>
                                                <td>678.33</td>
                                                <td>52</td>
                                                <td>6</td>
                                                <td>58</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>Ma</td>
                                                <td>290.57</td>
                                                <td>375.68</td>
                                                <td>28</td>
                                                <td>19</td>
                                                <td>47</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>V1</td>
                                                <td>301.80</td>
                                                <td>370.75</td>
                                                <td>5</td>
                                                <td>40</td>
                                                <td>45</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>Ka</td>
                                                <td>301.00</td>
                                                <td>0.00</td>
                                                <td>43</td>
                                                <td>0</td>
                                                <td>43</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>SY</td>
                                                <td>394.18</td>
                                                <td>444.43</td>
                                                <td>28</td>
                                                <td>14</td>
                                                <td>42</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>SX</td>
                                                <td>337.39</td>
                                                <td>0.00</td>
                                                <td>41</td>
                                                <td>0</td>
                                                <td>41</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>Zo</td>
                                                <td>323.71</td>
                                                <td>483.67</td>
                                                <td>7</td>
                                                <td>21</td>
                                                <td>28</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>Aq</td>
                                                <td>232.57</td>
                                                <td>398.35</td>
                                                <td>7</td>
                                                <td>17</td>
                                                <td>24</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>Bo</td>
                                                <td>474.88</td>
                                                <td>606.25</td>
                                                <td>16</td>
                                                <td>8</td>
                                                <td>24</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>Ti</td>
                                                <td>264.62</td>
                                                <td>334.18</td>
                                                <td>13</td>
                                                <td>11</td>
                                                <td>24</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>SZ</td>
                                                <td>130.93</td>
                                                <td>141.00</td>
                                                <td>14</td>
                                                <td>1</td>
                                                <td>15</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>Fo</td>
                                                <td>119.14</td>
                                                <td>0.00</td>
                                                <td>14</td>
                                                <td>0</td>
                                                <td>14</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>V2</td>
                                                <td>276.88</td>
                                                <td>0.00</td>
                                                <td>8</td>
                                                <td>0</td>
                                                <td>8</td>
                                            </tr>
                                        
                                            <tr>
                                                <td>So</td>
                                                <td>213.50</td>
                                                <td>0.00</td>
                                                <td>6</td>
                                                <td>0</td>
                                                <td>6</td>
                                            </tr>
                                        
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    
<!-- Footer -->
<div id="footer" class="bg-dark text-white text-center py-3">
    <p class="mb-1">
        Website created and owned by: Olivia | 
        <a href="https://linktr.ee/livvydoodlez" class="text-info" target="_blank">"Livvydoodlez"</a> 
        &copy; 2024 - 2026
    </p>
    <p class="footer-powered small mb-0">Powered by ColdFusion</p>
</div>


<!-- Ensure Footer is At the Bottom -->
<script>
    // Ensure footer stays at the bottom but doesn't overlap
    document.addEventListener("DOMContentLoaded", function () {
        const footer = document.getElementById('footer');
        const body = document.body;

        // Add padding to the body to ensure footer spacing
        const footerHeight = footer.offsetHeight + 75; // Footer height + minimum space
        body.style.paddingBottom = `${footerHeight}px`;

        // Make footer "sticky" if content is short
        if (body.scrollHeight <= window.innerHeight) {
            footer.style.position = 'absolute';
            footer.style.bottom = '0';
            footer.style.left = '0';
            footer.style.width = '100%';
        } else {
            footer.style.position = 'relative';
        }
    });
</script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>

<script>
    // Helper function to generate distinct colors
    function generateDistinctColors(count) {
        const colors = [];
        const hueStep = 360 / Math.max(count, 1);
        for (let i = 0; i < count; i++) {
            colors.push(`hsl(${i * hueStep}, 70%, 55%)`);
        }
        return colors;
    }
    
    // Prepare route data
    const routeLabels = [
        "CoMeFoSXTiBoV1","CoMeFoSXMaBoV1","CoMeFoSXMaA6V2","CoMeFoSXSZBoV1","CoMeFoSXSZA6V2","CoMeFoSoMaBoV1","CoMeFoSoMaA6V2","CoMeKaSXTiBoV1","CoMeKaSXMaBoV1","CoMeKaSXMaA6V2","CoMeKaSXSZBoV1","CoMeKaSXSZA6V2","CoMeKaSoMaBoV1","CoMeKaSoMaA6V2","CoSYKaSXTiBoV1","CoSYKaSXMaBoV1","CoSYKaSXMaA6V2","CoSYKaSXSZBoV1","CoSYKaSXSZA6V2","CoSYKaSoMaBoV1","CoSYKaSoMaA6V2","CoSYAqZoMaBoV1","CoSYAqZoMaA6V2","CoSYAqZoSZBoV1","CoSYAqZoSZA6V2",
    ];
    
    const routeNormalCounts = [
        5,3,3,3,3,2,1,1,2,122,1,1,1,2,1,1,1,2,3,2,1,0,30,1,4,
    ];
    
    const routeNormalAvgs = [
        1737.8,2024.33,2051.67,1596,1348.33,1609.5,2076,1870,2463.5,2219.33,1811,2237,2081,2995.5,2059,2050,2310,1723,1620.67,1773.5,2090,,2285.4,2200,2190.25,
    ];
    
    const routeExpertCounts = [
        1,0,0,0,0,0,0,0,0,6,0,0,0,0,0,0,0,0,0,1,0,20,11,0,0,
    ];
    
    const routeExpertAvgs = [
        1001,,,,,,,,,2423,,,,,,,,,,1213,,2963.65,2503.27,,,
    ];
    
    const routeSingleLifeCounts = [
        14,5,10,5,5,4,4,4,5,44,4,10,6,6,4,5,4,12,7,5,5,9,16,3,10,
    ];
    
    const routeSingleLifeAvgs = [
        1780.29,2280.2,2177.7,1796.8,2198.6,2269.25,2200.75,2511.25,2336.6,2251.66,2273.75,2130.2,2167,2236.33,2176.75,2460.2,2378.5,1842.25,2051,2251.2,2305.2,2547.11,2068.06,2305,2138.4,
    ];
    
    // Prepare individual level data
    const ilsLabels = [
        "Co","Me","A6","Ma","V1","Ka","SY","SX","Zo","Aq","Bo","Ti","SZ","Fo","V2","So",
    ];
    
    const ilsNormalCounts = [
        53,57,52,28,5,43,28,41,7,7,16,13,14,14,8,6,
    ];
    
    const ilsNormalAvgs = [
        283.02,502.95,618.71,290.57,301.8,301,394.18,337.39,323.71,232.57,474.88,264.62,130.93,119.14,276.88,213.5,
    ];
    
    const ilsExpertCounts = [
        30,4,6,19,40,0,14,0,21,17,8,11,1,0,0,0,
    ];
    
    const ilsExpertAvgs = [
        338.73,562.75,678.33,375.68,370.75,,444.43,,483.67,398.35,606.25,334.18,141,,,,
    ];
    
    // Function to create pie charts with averages in tooltips
    function createPieChart(canvasId, labels, data, averages, title) {
        const ctx = document.getElementById(canvasId).getContext('2d');
        const colors = generateDistinctColors(labels.length);
        
        return new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: data,
                    backgroundColor: colors,
                    borderWidth: 2,
                    borderColor: '#1e2124'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const avg = averages[context.dataIndex];
                                return `${label}: ${value} submissions (Avg Score: ${avg.toFixed(2)})`;
                            }
                        }
                    },
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#e0e0e0',
                            font: { size: 10 }
                        }
                    }
                }
            }
        });
    }
    
    // Create all charts when page loads
    document.addEventListener('DOMContentLoaded', function() {
        // Route charts
        if (routeLabels.length > 0) {
            createPieChart('routesNormalChart', routeLabels, routeNormalCounts, routeNormalAvgs, 'Normal');
            createPieChart('routesExpertChart', routeLabels, routeExpertCounts, routeExpertAvgs, 'Expert');
            createPieChart('routesSingleLifeChart', routeLabels, routeSingleLifeCounts, routeSingleLifeAvgs, 'Single Life');
        }
        
        // Individual level charts
        if (ilsLabels.length > 0) {
            createPieChart('ilsNormalChart', ilsLabels, ilsNormalCounts, ilsNormalAvgs, 'Normal');
            createPieChart('ilsExpertChart', ilsLabels, ilsExpertCounts, ilsExpertAvgs, 'Expert');
        }
    });
    
    // Sorting functionality
    const sortStates = {};
    
    function toggleSort(tableId, columnIndex) {
        const table = document.getElementById(tableId);
        const tbody = table.querySelector('tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));
        
        if (!sortStates[tableId]) {
            sortStates[tableId] = {};
        }
        if (!sortStates[tableId][columnIndex]) {
            sortStates[tableId][columnIndex] = 'desc';
        }
        
        const order = sortStates[tableId][columnIndex];
        sortStates[tableId][columnIndex] = order === 'asc' ? 'desc' : 'asc';
        
        // Clear indicators
        const buttons = document.querySelectorAll(`#${tableId} .sort-buttons button`);
        buttons.forEach(button => {
            const indicator = button.querySelector('.indicator');
            if (indicator) indicator.textContent = '';
        });
        
        // Set new indicator
        const indicator = document.getElementById(`${tableId}-${columnIndex}-indicator`);
        if (indicator) indicator.textContent = order === 'asc' ? '▲' : '▼';
        
        // Sort rows
        rows.sort((a, b) => {
            let aValue = a.children[columnIndex].textContent.trim();
            let bValue = b.children[columnIndex].textContent.trim();
            
            // Try to parse as number
            const aNum = parseFloat(aValue);
            const bNum = parseFloat(bValue);
            
            if (!isNaN(aNum) && !isNaN(bNum)) {
                return order === 'asc' ? aNum - bNum : bNum - aNum;
            } else {
                return order === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
            }
        });
        
        // Re-append sorted rows
        tbody.innerHTML = '';
        rows.forEach(row => tbody.appendChild(row));
    }
    
    // Initialize default sort (by Total Submissions descending)
    window.onload = function() {
        if (typeof toggleSort !== 'undefined') {
            setTimeout(() => {
                toggleSort('routesTable', 8);
                toggleSort('ilsTable', 5);
            }, 100);
        }
    };
</script>