/* ADDED: Global setting to prevent horizontal page scrolling */
        body {
            overflow-x: hidden; 
        }

        /* Global box-sizing for table consistency */
        table, th, td {
            box-sizing: border-box;
        }

        /* 1. Top Navigation Bar */
        .top-nav {
            background-color: black;
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .logo-text {
            font-family:'Montserrat', sans-serif;
            color:#F1F1F1;
            text-align:left;
            letter-spacing:5px;
            font-weight:50;
            opacity: .6;
        }
        /* 2. Header Banner */
        .page-banner {
            height: 300px;
            background: linear-gradient(0deg, rgba(60,60,60,1) 8%, rgba(5,5,5,1) 60%, rgba(0,0,0,1) 93%);
            background-color: black;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            margin-bottom: 0;
        }

        .hero-text {
            position: relative;
            z-index:0;
            top:15%;
            text-align:center;
            padding-left:0;
            margin:auto;
            max-width:100%;
        }

        .stat-header {
            font-family:'Oswald', sans-serif;
            font-weight: 700;
            letter-spacing: 0.1em;
            font-size: 3rem; 
            color:#F1F1F1;

        }

        .herostat {
            font-size:16px;
            width:25%;
            border-right:1px solid #878787;
            display:inline-block;
            margin-top:20px;
        }

        .stat-value {
            font-family: 'Oswald', sans-serif;
            /* Reduced size for stat value */
            font-size: 1.2rem; 
            font-weight: 700;
            color: white; /* Ensure color is white */
            line-height: 1;
            margin-bottom: 5px;
        }


        .stat-label {
            font-family: 'Jost', sans-serif;
            /* Reduced size for stat label */
            font-size: 0.8rem; 
            color: rgba(255, 255, 255, 0.7); /* Lighter white for label */
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        @media only screen and (min-width: 600px){
        .page-banner {height: 400px;}
        .hero-text {font-size:64px; color:#F1F1F1;top:25%;
        margin:auto;}
        .herostat {font-size:20px; width:20%}}
       
        @media only screen and (min-width: 1000px){
        .page-banner {height: 400px;}
        .hero-text {font-size:64px; color:#F1F1F1;top:25%;right:25%;}
        .herostat {font-size:20px; width:10%;}}

        
        /* New class for Header Title (Converted from inline Tailwind) */
        .page-title {
            /* text-4xl sm:text-5xl */
            font-size: 2.25rem; /* 4xl */
            line-height: 2.5rem; /* 4xl */
            
            /* Responsive adjustment: sm:text-5xl */
            @media (min-width: 640px) {
                font-size: 3rem; /* 5xl */
                line-height: 1; /* tracking-tight effect */
            }
            
            /* font-extrabold */
            font-weight: 800; 
            /* tracking-tight */
            letter-spacing: -0.025em; 
            /* mb-2 */
            margin-bottom: 0.5rem;
            /* font-['Oswald'] */
            font-family: 'Oswald', sans-serif; 
            /* fade-in-animation */
            animation: fade-in 1s ease-out forwards;
            opacity: 0;
            /* text-white & text-center (moved from parent div) */
            color: white; 
            text-align: center;
        }
        
        /* REMOVED .page-banner-content CSS to revert to Tailwind spacing */


        /* 3. Sport/Second Navigation Bar */
        .sport-nav {
            background-color: #1C2733; 
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            position: sticky;
            top: 64px; /* sticky top-16 */
            z-index: 40;
        }
        
        /* Class for the "Total - Results" Title */
        .sport-nav-title {
            /* text-2xl */
            font-size: 1.5rem; 
            /* font-semibold */
            font-weight: 600; 
            /* font-['Oswald'] */
            font-family: 'Oswald', sans-serif; 
            /* tracking-wider */
            /* italic */
            font-style: italic;
            /* text-white */
            color: white; 
            /* pr-5 */
            padding-right: 1.25rem; 
            padding-top: 0.75rem; 
            padding-bottom: 0.75rem;
        }

        @media (min-width: 640px) { /* sm:block */
            .sport-nav-title {
                display: block;
            }
        }


        /* 4. Secondary/Third Navigation Bar */
        .secondary-nav {
            background-color: #f9fafb; /* Tailwind gray-50 */
            border-bottom: 1px solid #e5e7eb; /* Tailwind border-b border-gray-200 */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Tailwind shadow-md */
        }

        /* 5. Notes Panel Container */
        .notes-panel-container {
            background-color: white;
            border: 1px solid #d1d5db; /* Tailwind border border-gray-300 */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Tailwind shadow-sm */
            border-radius: 0.125rem; /* Tailwind rounded-sm */
            overflow-y: visible;
        }
        
        /* Notes Toggle Button (Converted from inline Tailwind) */
        .notes-toggle-btn {
            /* flex justify-between items-center w-full text-left */
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            text-align: left;
            color: gray;
            font-weight: 700;
            transition: color 150ms ease-in-out;
            /* p-3 border-b border-gray-300 */
            padding: 0.75rem;
            border-bottom: 1px solid rgb(209 213 219); /* gray-300 */
        }
        .notes-toggle-btn:hover {
            color: rgb(49 41 150); /* hover:text-indigo-900 */
        }

        /* Notes Title Span (Converted from inline Tailwind) */
        .notes-title-span {
            /* text-base font-['Oswald'] tracking-wider */
            font-size: 1rem;
            font-family: 'Oswald', sans-serif; 
            letter-spacing: 0.05em; /* tracking-wider */
        }

        /* Notes Chevron Icon (Converted from inline Tailwind) */
        .notes-chevron {
            /* h-5 w-5 transform transition-transform duration-300 */
            height: 1.25rem;
            width: 1.25rem;
            transform: rotate(0); /* Base state */
            transition: transform 300ms ease-in-out;
        }

        /* Notes Content Body (Converted from inline Tailwind) */
        .notes-content-body {
            /* text-gray-700 text-sm overflow-hidden max-h-0 transition-all duration-500 ease-in-out */
            color: rgb(55 65 81); /* text-gray-700 */
            font-size: 0.875rem; /* text-sm */
            overflow: hidden;
            max-height: 0;
            transition: max-height 500ms ease-in-out;
        }
        
        /* Notes Content Inner Padding/Font (Converted from inline Tailwind) */
        .notes-content-inner {
            /* font-[Lato] px-3 py-3 */
            font-family: 'Lato', sans-serif;
            padding: 0.75rem; /* px-3 py-3 */
        }

        .notes-divider {
            background-color:#F2F0EF;
            height:2px;
            margin:auto;
            margin-top: 20px;
            margin-bottom: 20px;
            width:90%;
        }

        /* 6. Export Button */
        .export-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            background-color: #4f46e5; /* Tailwind indigo-600 */
            color: white;
            font-weight: 600; /* Tailwind font-semibold */
            font-family: 'Lato', sans-serif;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Tailwind shadow-lg */
            transition: background-color 150ms ease-in-out;
            border-radius: 0.125rem; /* Tailwind rounded-sm */
            width: 100%; /* Tailwind w-full */
        }
        .export-btn:hover {
            background-color: #4338ca; /* Tailwind hover:bg-indigo-700 */
        }
        .export-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        @media (min-width: 640px) { /* sm:w-auto */
            .export-btn {
                width: auto;
            }
        }

        /* 7. Scroll To Top Button */
        .scroll-top-btn {
            position: fixed;
            bottom: 1.5rem; /* Tailwind bottom-6 */
            right: 1.5rem; /* Tailwind right-6 */
            background-color: #A9A9A9; 
            padding: 0.75rem; /* Tailwind p-3 */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Tailwind shadow-xl */
            color: white;
            transition: opacity 300ms ease-in-out;
            z-index: 50;
            border-radius: 0.125rem; /* Tailwind rounded-sm */
        }
        .scroll-top-btn:hover {
            background-color: gray; /* Tailwind hover:bg-indigo-700 */
        }
        
        /* --- Navigation Link Styles (Moved from Tailwind to CSS) --- */

        /* Top Navigation Desktop Links */
        .top-nav .nav-link {
            /* inline-flex items-center */
            display: inline-flex;
            align-items: center;
            /* px-1 pt-1 */
            padding: 0.25rem 0.25rem;
            /* text-sm font-medium */
            font-size: 0.875rem;
            font-weight: 500;
            transition: color 150ms ease-in-out;
        }
        .top-nav .nav-link-main {
            /* text-white */
            color: white;
        }
        .top-nav .nav-link-secondary {
            /* text-gray-300 */
            color: rgb(209 213 219);
        }
        .top-nav .nav-link-secondary:hover {
            /* hover:text-white */
            color: white;
        }
        
        /* Added CSS for Donate Button in Top Nav */
        .donate-btn {
            /* Smaller padding and rounded corners as requested */
            padding: 0.4rem 0.8rem;
            background-color: #4f46e5; 
            color: white;
            font-weight: 600; 
            font-size: 0.875rem; 
            border-radius: 0.25rem; 
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: background-color 150ms ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Lato', sans-serif;
        }
        .donate-btn:hover {
            background-color: #4338ca;
        }


        /* ------------------------------------------------------------------ */
        /* FIX: Made dropdown styles generic so they work in all navbars */
        /* ------------------------------------------------------------------ */

        /* Dropdown Panel - Applies to both Top and Secondary nav dropdowns */
        .dropdown-panel {
            /* absolute right-0 top-full mt-1 z-10 w-48 shadow-lg bg-white ring-1 ring-black ring-opacity-5 rounded-sm */
            position: absolute;
            top: 100%;
            margin-top: 0.25rem;
            z-index: 10;
            width: 12rem; /* w-48 */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            background-color: white;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 0.125rem;
        }
        
        /* Secondary Nav fix: Align secondary dropdown to the left of its button */
        .secondary-nav .dropdown-panel {
            left: 0; 
        }

        /* Top Nav fix: Keep top nav dropdown aligned to the right */
        /* The Results dropdown needs to be left-aligned under its button, the More dropdown right-aligned */
        .top-nav #more-dropdown-panel {
            right: 0;
            left: auto;
        }
        .top-nav #results-dropdown-panel {
            left: 0;
            right: auto;
        }
        
        /* Removed Results dropdown specific CSS */


        /* Dropdown Link - Applies to all dropdown links */
        .dropdown-link {
            /* block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 */
            display: block;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            color: rgb(55 65 81);
            transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
        }
        .dropdown-link:hover {
            background-color: rgb(243 244 246);
        }

        /* --- Mobile Menu Styles (Refactored to pure CSS) --- */
        
        /* UPDATED: Add transition for the icons */
        .mobile-menu-icon {
            transition: opacity 300ms ease, transform 300ms ease;
        }

        /* UPDATED: Remove default focus ring on click for the mobile menu button */
        #mobile-menu-button:focus {
            outline: none;
            box-shadow: none; /* Removed focus ring utility classes from HTML */
        }
        
        /* --- Hamburger Animation CSS --- */
        #mobile-menu-button .line {
            transform-origin: center;
            transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
        }
        
        /* The 'open' class is toggled in JS when the menu is open */
        #mobile-menu-button.open #bar-top {
            /* Move up and rotate 45 deg */
            transform: translateY(3px) rotate(45deg);
        }
        #mobile-menu-button.open #bar-mid {
            /* Fade out middle bar */
            opacity: 0;
        }
        #mobile-menu-button.open #bar-bot {
            /* Move down and rotate -45 deg */
            transform: translateY(-6px) rotate(-45deg);
        }
        
        /* Hide the default x-icon when using the animated bars */
        #mobile-icon-close {
             display: none !important;
        }
        /* --- End Hamburger Animation CSS --- */

        
        .mobile-menu-link {
            /* block px-3 py-2 text-base font-medium rounded-sm */
            display: block;
            padding: 0.5rem 0.75rem;
            font-size: .95rem;
            font-family: 'Lato', 'sans-serif';
            border-radius: 0.125rem;
            transition: all 150ms ease-in-out;
            color: white; /* Set default color to white */
            border-bottom: 2px solid transparent; /* Prepare for underline */
        }
        
        /* Active Link Style - White text, faint white underline */
        .mobile-menu-link-active {
            color: white;
            font-weight: 600;
            background-color: transparent !important; /* Override any bg changes */
            border-bottom: 2px solid rgba(255, 255, 255, 0.4); 
        }
        
        /* Inactive Link Style */
        .mobile-menu-link-inactive {
            color: white; /* Set default text color to white */
            background-color: transparent !important;
        }
        
        /* Inactive Link Hover - Underline on hover */
        .mobile-menu-link-inactive:hover {
            color: gray;
            background-color: rgba(255, 255, 255, 0.05); /* Slight hover tint for better interaction */
        }
        
        .mobile-menu-section-title {
            /* text-gray-400 px-3 text-sm font-semibold */
            color: rgb(156 163 175);
            padding: 0 0.75rem;
            font-size: 0.875rem;
            font-weight: 600;
        }
        .mobile-menu-content {
            /* px-2 pt-2 pb-3 space-y-1 */
            padding: 0.5rem 0.75rem 0.75rem 0.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.25rem; /* space-y-1 */
            height:100vh;
        }
        
        /* Separator and padding for the "More" section */
        .mobile-menu-separator {
            /* border-t border-gray-700 mt-2 pt-2 */
            border-top: 1px solid rgb(55 65 81); 
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.25rem; /* space-y-1 */
        }
        
        /* Indent for the links under the "More" section */
        .mobile-menu-link-indent {
            margin-left: 1rem; /* ml-4 */
        }

                /* FIX: Ensure mobile menu is hidden by default and controlled by JS/media query */
        #mobile-menu {
            display: none;
        }
        @media (min-width: 768px) {
            /* md:hidden */
            #mobile-menu {
                /* Explicitly set to block for desktop nav use, hidden otherwise */
                display: none !important;
            }
        }


        /* End Mobile Menu Styles */
        
        /* Sport Navigation Button */
        .sport-nav-button {
            /* text-white inline-flex items-center px-4 py-2 text-sm font-semibold font-['Oswald'] tracking-wider rounded-sm */
            display: inline-flex;
            align-items: center;
            color: white;
            padding: 0.5rem 1rem; /* px-4 py-2 */
            font-size: 16px; /* text-sm */
            font-family: 'Oswald', sans-serif; 
            transition: all 150ms ease-in-out;
        }
        .sport-nav-button:hover {
            color: #FCBA04; /* hover:text-yellow-300 */
        }

        /* Sport Nav Button Icon */
        .sport-nav-button-icon {
            /* -mr-1 ml-2 h-5 w-5 text-white transition-colors duration-150 */
            margin-right: -0.25rem; /* -mr-1 */
            margin-left: 0.5rem; /* ml-2 */
            height: 1.25rem; /* h-5 */
            width: 1.25rem; /* w-5 */
            color: white;
            transition: color 150ms ease-in-out;
        }
        /* Handle icon hover when button is hovered (mimics Tailwind group-hover) */
        .sport-nav-button:hover .sport-nav-button-icon {
            color: #FCBA04; /* group-hover:text-yellow-300 */
        }

        /* Sport Dropdown Panel */
        .sport-dropdown-panel {
            /* absolute left-0 top-full z-20 w-[600px] lg:w-[800px] shadow-2xl bg-white ring-1 ring-black ring-opacity-5 rounded-sm */
            position: absolute;
            margin-top: 10px;
            left: 0;
            top: 100%;
            z-index: 20;
            width: 100vw; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            background-color: white;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 0.125rem;
        }
        @media (min-width: 1024px) { 
            .sport-dropdown-panel {
                width: 100vw;
            }
        }
        
        /* Sport Dropdown Inner Content - UPDATED FOR COLUMN LAYOUT */
        .sport-dropdown-content-inner {
            column-gap: 1rem; /* gap-x-4 */
            column-count: 3;
        }
        @media (min-width: 640px) { /* sm breakpoint */
            .sport-dropdown-content-inner {
                column-count: 3;
            }
        }
        @media (min-width: 768px) { /* md breakpoint */
            .sport-dropdown-content-inner {
                column-count: 4;
            }
        }
        @media (min-width: 1024px) { /* lg breakpoint */
            .sport-dropdown-content-inner {
                column-count: 7;
            }
        }


        .sport-dropdown-link {
            /* block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 */
            display: block;
            padding: 10px;
            font-size: 0.775rem;
            font-family:'Lato', 'sans-serif';
            color: rgb(55 65 81);
            border-radius: 0.125rem;
            transition: all 150ms ease-in-out;
            /* Prevent items from breaking across columns */
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        .sport-dropdown-link:hover {
            color: gray; 
            background-color: rgb(243 244 246); 
        }

        /* Added Styles for Not-Included Section */
        .not-included-separator {
            /* Style for the text: text-xs, gray-500, italic, mt-3, mb-1 */
            font-size: 0.75rem; 
            color: rgb(107 114 128);
            font-style: italic;
            margin-top: 0.75rem;
            margin-bottom: 0.25rem;
            padding: 10px; /* Match link horizontal padding */
            
            /* Crucial: Prevents this header from breaking across columns */
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
        }

        .not-included-line {
            /* Style for the horizontal rule: border-t, border-gray-200, mt-1, mb-2 */
            border-top: 1px solid rgb(229 231 235);
            margin-top: 0.25rem;
            margin-bottom: 0.5rem;
            
            /* Crucial: Prevents this rule from breaking across columns */
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
        }


        /* --- Secondary Nav Custom CSS --- */
        
        /* New class for content container (replaces inline flex/gap/justify classes) */
        .secondary-nav-content {
            display: flex;
            align-items: stretch;
            justify-content: flex-start;
        }
        
        /* UPDATED: Third Nav Bar Height/Container */
        .secondary-nav > div > div.flex {
            /* Targetting the inner flex div with h-16 */
            height: 3.5rem; /* Changed from h-16 (4rem) to h-12 (3rem) for narrower bar */
            align-items: flex-end; /* Ensure links align to the bottom */
        }


        /* Nav Link Wrapper (used for layout) */
        .secondary-nav .nav-link-wrapper {
            /* flex flex-col justify-end */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        
        /* Base Nav Link Style */
        .secondary-nav .nav-link {
            /* text-sm tracking-wider transition-colors duration-150 */
            font-size: 1 rem;
            transition: all 150ms ease-in-out;
        }
        
        /* Active Link Style */
        .secondary-nav .nav-link-active {
            color: rgb(17 24 39);
            border-bottom: 2px solid #FCBA04;
            font-weight: 604;
            /* UPDATED: Reduced vertical padding to make underline flush (was py-4/1rem) */
            padding: 0.625rem 0.75rem 1rem 0.75rem; /* 10px top, 8px bottom */
        }
        
        /* Inactive Link Style */
        .secondary-nav .nav-link-inactive {
            /* text-gray-600 border-transparent px-3 py-4 hover:border-b-2 hover:border-indigo-600 font-medium */
            color: rgb(75 85 99);
            border-bottom: 2px solid transparent;
            /* UPDATED: Reduced vertical padding to match active link */
            padding: 0.625rem 0.75rem 1rem 0.75rem; /* 10px top, 8px bottom */
        }
        .secondary-nav .nav-link-inactive:hover {
            /* hover:text-indigo-600 hover:border-indigo-600 */
            color: #FCBA04;
            border-bottom: 2px solid #FCBA04;
        }
        
        /* Inactive Link Padding for Desktop (md:flex) */
        .secondary-nav .nav-link-desktop-padding {
            /* md:flex text-gray-600 hover:text-indigo-600 border-transparent flex-col justify-end px-4 py-4 */
            /* UPDATED: Reduced vertical padding to match other links */
            padding: 0.625rem 1rem 1rem 1rem; /* 10px top, 8px bottom */
        }
        
        /* New class for the 'More' button (replaces inline Tailwind) */
        .secondary-more-button {
            /* text-gray-600 hover:text-indigo-600 inline-flex items-center transition duration-150 ease-in-out font-medium */
            color: rgb(75 85 99); /* text-gray-600 */
            display: inline-flex;
            align-items: center;
            padding-bottom: 18px;
            transition: all 150ms ease-in-out;
        }
        .secondary-more-button:hover {
            /* hover:text-indigo-600 */
            color: #FCBA04 ;
        }

        /* --- Table/Sticky Styles --- */

        .w-col-1 { min-width: 60px; } /* Row Index (Sticky 1) */
        .w-col-2 { min-width: 60px; } /* Project Name (Sticky 2) */
        .w-col-3 { max-width: 110px; } /* Category (Sticky 3) */
        .w-col-7 { width: 200px; } /* Width for columns 7 */
        .w-col-10 { width: 300px; } /* Width for columns 10 */

        /* Sticky Column 1 (Row Index) - LEFT: 0px */
        .sticky-col-1 {
            position: sticky;
            left: 0;
            z-index: 4; 
        }
        
        /* Sticky Column 2 (Date) - LEFT: 45px */
        .sticky-col-2 {
            position: sticky;
            left: 60px;
            z-index: 3;
        }
        
        /* Sticky Column 3 (Name) - LEFT: 45px + 60px = 105px */
        .sticky-col-3 {
            position: sticky;
            left: 118px;
            z-index: 4;
        }

        /* --- Responsive Column Widths and Sticky Positions (Desktop/Tablet: min-width: 1000px) --- */
        @media (min-width: 1000px) {
            
            /* Increase minimum widths for key content columns */
            .w-col-1 { min-width: 60px; }  /* Row Index (Sticky 1) */
            .w-col-2 { width: 80px; } 
            .w-col-3 { max-width: 200px; } 
            .w-col-7 { max-width: 140px; } /* Width for columns 7 */
            .w-col-10 { max-width: 300px; } /* Width for columns 10 */


            /* Recalculate Sticky Positions based on new desktop widths */

            /* Sticky Column 2 (Date) - LEFT: 45px (Width of Col 1) */
            .sticky-col-2 {
                left: 60px;
            }
            
            /* Sticky Column 3 (Name) - LEFT: 45px + 80px = 125px */
            .sticky-col-3 {
                left: 120px;
            }
        }

        /* Sticky Header Cells */
        .table-header th {
            position: sticky;
            top: 0;
            font-family: 'Lato', sans-serif; /* Apply Lato to header */
            background-color: #1f2937; /* Equivalent to Tailwind bg-gray-800 */

        }

        .table-header .sticky-col-1, 
        .table-header .sticky-col-2,
        .table-header .sticky-col-3 { 
            color: white;
            z-index: 5; /* Ensure header stickies are above body stickies */
        }

        .table-wrapper {
            overflow-x: auto;
        }


        /* Apply Lato to table body cells */
        #table-body td {
            font-size: 13px !important; 
            font-family: 'Lato', sans-serif; /* Apply Lato to data cells */
            padding: 3px, 3px;
            overflow-wrap: break-word;
            
        }


        /* --- Zebra Striping and Hover Effects --- */

        /* 1. Zebra Striping: Apply a light gray background to every other row (odd) */
        #table-body tr:nth-child(odd) {
            background-color: #eff3f4; 
        }
        
        /* 2. Fix Sticky Column Backgrounds (MUST be explicit and non-transparent) */
        
        /* Explicitly set sticky column background for ODD rows (Light Gray) */
        #table-body tr:nth-child(odd) .sticky-col-1,
        #table-body tr:nth-child(odd) .sticky-col-2,
        #table-body tr:nth-child(odd) .sticky-col-3 {
            background-color: #eff3f4;
        }

        /* Explicitly set sticky column background for EVEN rows (White) */
        /* IMPORTANT: Sticky cells inside the table MUST be explicitly white or they look broken. */
        #table-body tr:nth-child(even) .sticky-col-1,
        #table-body tr:nth-child(even) .sticky-col-2,
        #table-body tr:nth-child(even) .sticky-col-3 {
            background-color: #ffffff;
        }

        table td:nth-child(3) {
            box-shadow: inset -1px 0 0 0 #ffffff;
        }


        /* 3. Hover Effect: Darker background and white text for ALL cells in the row */
        #table-body tr:hover {
            background-color: #4685c9 !important;
        }
        
        /* Ensure all text within the hovered row, including those with custom colors, turn white */
        #table-body tr:hover td {
            color: white !important;
        }

        /* Crucial: Ensure sticky cells also get the dark background on hover
           (Use !important to override the explicit odd/even sticky backgrounds set above) */
        #table-body tr:hover .sticky-col-1,
        #table-body tr:hover .sticky-col-2,
        #table-body tr:hover .sticky-col-3 {
            background-color: #4685c9 !important;
        }

        /* Override hover effect for links to maintain readability */
        #table-body tr:hover td a {
            color: #93c5fd !important; /* Light blue link color on hover row */
        }

        /* Style for active pagination button */
        .page-button-active {
            background:rgb(233, 233, 233);
        }

        /* --- Fade-In Animation for Banner Title --- */
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .fade-in-animation {
            animation: fade-in 1s ease-out forwards;
            opacity: 0; /* Start invisible */
        }

              .table-notes {
          font-size:12px; 
          font-family:'Lato', sans-serif; 
          width:90%; 
          margin:auto; 
          margin-left:20px;
          padding-bottom: 20px;
          padding-top: 10px;
        }

        
        /* --- Footer Styles --- */
        .site-footer {
            background-color: black; /* bg-gray-900 */
            color: white;
            font-family: 'Inter', sans-serif;
        }

        .footer-container {
            max-width: 80rem; /* max-w-7xl */
            margin-left: auto;
            margin-right: auto;
            padding: 3rem 4rem; /* py-12 px-4 */
        }
        
        /* sm breakpoint: 640px */
        @media (min-width: 640px) {
            .footer-container {
                padding-left: 1.5rem; /* sm:px-6 */
                padding-right: 1.5rem;
            }
        }
        
        /* lg breakpoint: 1024px */
        @media (min-width: 1024px) {
            .footer-container {
                padding-left: 2rem; /* lg:px-8 */
                padding-right: 2rem;
            }
        }

        /* Grid Layout - MOBILE/DEFAULT (Two columns for links, logo spans two columns) */
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Two columns for mobile layout */
            gap: 3rem; /* gap-12 */
        }
        
        /* Logo Column Centering - MOBILE/DEFAULT */
        .footer-logo-column {
            grid-column: span 2 / span 2; /* Force logo column to span both columns */
            text-align: center; /* Center all text content */
        }

        /* md breakpoint: 768px (Desktop layout: 6 columns) */
        @media (min-width: 768px) {
            .footer-grid {
                grid-template-columns: repeat(6, minmax(0, 1fr)); /* Revert to 6 columns */
            }
            .footer-logo-column {
                grid-column: span 2 / span 2; /* Logo spans 2 columns */
                text-align: left; /* Revert logo column text alignment to left */
            }
        }

        /* Logo and Description */
        .footer-logo {
            display: block; /* Required for auto margins */
            margin-left: auto; /* Center image on mobile */
            margin-right: auto;
            width: 12rem; /* w-48 */
            height: auto;
            border-radius: 0.375rem; /* rounded-md */
            margin-bottom: 1rem;
        }

        /* Revert logo image alignment for tablet/desktop */
        @media (min-width: 768px) {
            .footer-logo {
                margin-left: 0;
                margin-right: 0;
            }
        }

        .footer-logo-description {
            font-size: 0.875rem; /* text-sm */
            color: #9ca3af; /* text-gray-400 */
            line-height: 1.5;
            max-width: 90%; /* Helps centering on narrow screens */
            margin: 0 auto;
        }
        
        /* Revert description width for tablet/desktop */
        @media (min-width: 768px) {
            .footer-logo-description {
                max-width: 100%;
                margin: 0;
            }
        }


        /* Link Section Titles */
        .footer-links-title {
            font-family: 'Oswald', sans-serif;
            font-size: 0.875rem; /* text-sm */
            font-weight: 600; /* font-semibold */
            letter-spacing: 0.05em; /* tracking-wider */
            text-transform: uppercase;
            color: #d1d5db; /* text-gray-300 */
        }

        /* Link Lists */
        .footer-links-list {
            list-style: none;
            margin: 1rem 0 0 0; /* mt-4 */
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem; /* space-y-2 */
            text-align: left; /* Ensure list items align left even if parent is centered */
        }

        .footer-links-list a {
            font-size: .85rem; /* text-base */
            color: #d1d5db; /* text-gray-300 */
            text-decoration: none;
            transition: color 150ms ease-in-out;
        }

        .footer-links-list a:hover {
            color: white;
        }
        
        /* Contact specific styling */
        .footer-contact-item {
            display: flex;
            align-items: center;
            gap: 0.5rem; /* space-x-2 */
            font-size: 0.875rem; /* text-sm */
        }

        .footer-contact-item .footer-icon {
            font-size: 1.125rem; /* text-lg */
            color: #9ca3af; /* text-gray-400 */
        }
        
        .social-icon {
            width: 1.5rem; /* w-6 */
            height: 1.5rem; /* h-6 */
            fill: currentColor; /* fill-current */
        }

        /* Bottom Bar */
        .footer-bottom {
            margin-top: 3rem; /* mt-12 */
            border-top: 1px solid #374151; /* border-t border-gray-700 */
            padding-top: 2rem; /* pt-8 */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center; /* Center text on mobile */
        }

        /* sm breakpoint: 640px (for sm:flex-row sm:justify-between) */
        @media (min-width: 640px) {
            .footer-bottom {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
            }
        }

        .footer-copyright {
            font-size: 1rem; /* text-base */
            color: #9ca3af; /* text-gray-400 */
        }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }