/* Custom CSS variables for theming */
:root {
    --bg-color: #f8f9fa; /* Light background */
    --text-color: #212529; /* Dark text */
    --header-bg: #343a40; /* Darker header */
    --header-text: #ffffff; /* White header text */
    --button-bg: #007bff; /* Primary blue button */
    --button-text: #ffffff;
    --button-hover-bg: #0056b3;
    --table-border: #dee2e6; /* Light gray border */
    --table-header-bg: #e9ecef; /* Light header background */
    --table-header-text: #495057; /* Darker header text */
    --suggestions-bg: #ffffff;
    --gold: #ffda6a; /* Softer gold */
    --silver: #bdbfc3; /* Softer silver */
    --bronze: #d09c85; /* Softer bronze */
    --row-hover-bg: #e2e6ea; /* Lighter hover */
    --loading-color: #007bff;
    --card-bg: #ffffff;
    --card-border: #e0e0e0;
    --modal-bg: rgba(0, 0, 0, 0.5);
    --modal-content-bg: #ffffff;
    --modal-text: #212529;
    --clear-button-color: #6c757d; /* Gray for clear button */
    --clear-button-hover-color: #495057; /* Darker gray on hover */

    --filter-button-active-bg: #0056b3; /* Darker blue for active filter button */
    --filter-button-active-text: #ffffff;

    --table-striped-even-bg-light: #f0f3f7; /* More distinct light grey */
    --table-striped-even-bg-dark: #2c3541; /* Darker background for even rows in dark mode */

    /* RGB values for transparent overlay calculation */
    --bg-color-rgb: 248, 249, 250;
}

/* Dark mode variables */
.dark {
    --bg-color: #1a202c; /* Dark background */
    --text-color: #e2e8f0; /* Light text */
    --header-bg: #2d3748; /* Darker header */
    --header-text: #e2e8f0;
    --button-bg: #4a5568; /* Darker button */
    --button-text: #e2e8f0;
    --button-hover-bg: #2d3748;
    --table-border: #4a5568;
    --table-header-bg: #2d3748;
    --table-header-text: #e2e8f0;
    --suggestions-bg: #2d3748;
    --gold: #d4af37; /* Darker gold */
    --silver: #a8a8a8; /* Darker silver */
    --bronze: #b08c6a; /* Darker bronze */
    --row-hover-bg: #4a5568;
    --loading-color: #63b3ed;
    --card-bg: #2d3748;
    --card-border: #4a5568;
    --modal-bg: rgba(0, 0, 0, 0.7);
    --modal-content-bg: #1a202c;
    --modal-text: #e2e8f0;
    --clear-button-color: #9a9ea5; /* Lighter gray for clear button in dark mode */
    --clear-button-hover-color: #b0b4b9; /* Even lighter gray on hover */

    --filter-button-active-bg: #63b3ed; /* Lighter blue for active filter button in dark mode */
    --filter-button-active-text: #1a202c;

    --table-striped-even-bg-light: #2d3748; /* This variable is not used in dark mode body.dark-mode: tbody tr:nth-child(even) */
    --table-striped-even-bg-dark: #333c4a; /* Even darker for stripe, distinct from header */

    --bg-color-rgb: 26, 32, 44;
}

/* General body styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    line-height: 1.6;
}
/* Styling for the leaderboard section container */
#leaderboardSection {
    background-color: var(--card-bg); /* Use your defined card background variable */
    border: 1px solid var(--card-border); /* Optional: Add a border for consistency */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Ensure smooth transitions */
    }
/* Styling for the "Leaderboard" title inside the section */
#leaderboardSection h2 {
    color: var(--text-color); /* This will ensure the title text also switches */
    transition: color 0.3s; /* Smooth transition for title text */
    }
/* Table specific styles not fully covered by Tailwind or requiring specific overrides */
table {
    border-collapse: collapse;
    table-layout: auto; /* Allow columns to auto-size based on content */
    border: 1px solid var(--table-border);
    transition: opacity 0.4s ease;
    width: 100%; /* Ensure table takes full width of its container */
    background-color: var(--bg-color);
}
table.fade-out {
    opacity: 0;
}
th, td {
    border: 1px solid var(--table-border);
    padding: 0.75rem; /* Equivalent to p-3 */
    text-align: left;
    white-space: normal; /* Allow text to wrap */
    overflow: visible; /* Ensure content is visible */
    text-overflow: clip; /* Prevent ellipsis */
}
th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Adjusted for Inter font */
    position: sticky;
    top: 0;
    z-index: 10;
    cursor: pointer; /* Indicate sortability */
}
th.sorted-asc::after {
    content: ' \25B2'; /* Up arrow */
}
th.sorted-desc::after {
    content: ' \25BC'; /* Down arrow */
}

/* Ensure all tbody rows use the main text color by default */
tbody tr {
    color: var(--text-color); /* Set default text color for all rows */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Add transition for hover effects */
}
tbody tr:nth-child(odd) {
    background-color: var(--bg-color);
}
tbody tr:nth-child(even) {
    background-color: var(--table-striped-even-bg-light); /* Use new variable for distinct striping */
}
.dark tbody tr:nth-child(even) {
    background-color: var(--table-striped-even-bg-dark); /* Use new variable for distinct striping in dark mode */
    border-top: 1px solid #2d3748;
}
tbody tr:hover {
    background-color: var(--row-hover-bg);
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Gentle shadow on hover */
}
.dark tbody tr:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
/* Ensure dark text on medal rows for better readability */
tbody tr.top1 {
    background-color: var(--gold);
    font-weight: bold;
    color: #212529 !important; /* Force dark text for contrast */
}
tbody tr.top2 {
    background-color: var(--silver);
    font-weight: bold;
    color: #212529 !important; /* Force dark text for contrast */
}
tbody tr.top3 {
    background-color: var(--bronze);
    font-weight: bold;
    color: #212529 !important; /* Force dark text for contrast */
}
/* Force light text in dark mode for 2nd place for readability */
.dark tbody tr.top2 {
    color: #e2e8f0 !important; /* Light text for readability */
}

/* Styling for active filter button */
.filterBtn.active {
    background-color: var(--filter-button-active-bg) !important;
    color: var(--filter-button-active-text) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Subtle blue ring */
    border: 1px solid var(--filter-button-active-bg);
}
.dark.filterBtn.active {
    box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.25); /* Subtle light blue ring for dark mode */
}

/* Suggestions box positioning */
#suggestionsDiv {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-radius: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
}

#suggestionsDiv div {
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    cursor: pointer;
    color: var(--text-color);
    background-color: var(--suggestions-bg);
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s;
}
#suggestionsDiv div:hover, #suggestionsDiv div.highlighted { /* Add highlighted class for keyboard navigation */
    background-color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
}
.dark #suggestionsDiv div:hover, .dark #suggestionsDiv div.highlighted {
    background-color: #4a5568 !important;
    border-color: #4a5568 !important;
}

/* Loading spinner for main page (retained but less prominent) */
#loadingIndicator {
    display: none;
    position: absolute;
    right: 0.75rem; /* px-3 */
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    border: 3px solid var(--loading-color);
    border-top: 3px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 2000;
}
/* Specific spinner for search input */
#searchLoadingIndicator {
    display: none; /* Hidden by default */
    position: absolute;
    right: 2.5rem; /* Positioned to the left of the clear button */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001; /* Above input, below suggestions */
}
#searchLoadingIndicator .spinner {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    border: 2px solid var(--loading-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#loadingIndicator.active {
    display: block;
}

#searchLoadingIndicator.active {
    display: block;
}

@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

/* Modal styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background: var(--modal-content-bg);
    color: var(--modal-text);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 90%;
    width: 400px;
    text-align: center;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal-overlay.visible .modal-content {
    transform: translateY(0);
    opacity: 1;
}      
/* Table loading overlay */
.table-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use rgba with current background color for consistent theming */
    background: rgba(var(--bg-color-rgb), 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50; /* Above table rows, below main loading indicator */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: inherit; /* Inherit border-radius from parent */
}
.table-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}
.table-loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 4px solid var(--loading-color);
    border-top: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes fadeInOnce {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in-once {
    animation: fadeInOnce 1s ease-out forwards;
}

/* Clear button for search input */
.clear-search-btn {
    position: absolute;
    right: 0.75rem; /* px-3 */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem; /* p-1 */
    font-size: 1.25rem; /* text-xl */
    line-height: 1;
    color: var(--clear-button-color);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002; /* Above spinner and input */
}
.clear-search-btn:hover {
    color: var(--clear-button-hover-color);
}
/* Styling for the search section container */
#search-section {
    background-color: var(--card-bg); /* Use the card background variable */
    color: var(--text-color); /* For text/titles inside this section */
    border: 1px solid var(--card-border); /* Add a border if you want it to have one */
}

#athleteSearchName,
#athleteSearchID {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--card-border);
}

#athleteSearchName::placeholder,
#athleteSearchID::placeholder {
    color: var(--text-color);
    opacity: 0.6; /* lighter placeholder */
}

/* Optional: on focus to highlight border */
#athleteSearchName:focus,
#athleteSearchID:focus {
    border-color: var(--button-bg);
    outline: none;
}

/* Clear button colors */
#clearSearchNameBtn,
#clearSearchIDBtn {
    color: var(--clear-button-color);
}

#clearSearchNameBtn:hover,
#clearSearchIDBtn:hover {
    color: var(--clear-button-hover-color);
}


/* Styling for the "Search Athlete" title inside the search section */
#search-section h2 {
    color: var(--text-color); /* Ensure this also adapts */
}

/* Styling for the search input field */
#athleteSearch {
    background-color: var(--suggestions-bg); /* Using suggestions-bg as it's typically light for inputs */
    color: var(--text-color); /* Text color for user input */
    border-color: var(--table-border); /* Border color for the input */
}

/* For the search icon (SVG) - adjust as needed for visibility */
#search-section svg {
    color: var(--text-color); /* Make the icon color match the text */
    opacity: 0.7; /* Default opacity for light mode */
}
body.dark-mode #search-section svg {
    opacity: 0.8; /* Slightly more opaque in dark mode for better visibility */
}
/* Styling for the main page header */
#title {
    color: var(--text-color); /* This will ensure it switches with your --text-color variable */
}