/* Custom styles not covered by Tailwind CSS */

/* Basic container for page content */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

/* Error message styling */
.error {
    background-color: #fee2e2; /* Tailwind red-100 */
    color: #dc2626; /* Tailwind red-700 */
    border: 1px solid #ef4444; /* Tailwind red-500 */
    padding: 1rem;
    border-radius: 0.375rem; /* Tailwind rounded-md */
    margin-bottom: 1rem;
}

/* Table styling for results */
.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.875rem; /* Tailwind text-sm */
}

.results-table th,
.results-table td {
    border: 1px solid #e5e7eb; /* Tailwind gray-200 */
    padding: 0.75rem;
    text-align: left;
}

.results-table th {
    background-color: #3b82f6; /* Tailwind blue-500 */
    font-weight: 600; /* Tailwind font-semibold */
    color: #ffffff; /* Tailwind white */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Tailwind tracking-wider */
}

tbody tr:nth-child(odd) {
    background-color: #ffffff; /* Tailwind white */
}

tbody tr:nth-child(even) {
    background-color: #f9fafb; /* Tailwind gray-50 */
}

.results-table tbody tr:hover {
    background-color: #eef2ff; /* Tailwind indigo-50 */
}

.results-table .fastest-lap {
    font-weight: 700; /* Tailwind font-bold */
    color: #10b981; /* Tailwind green-500 */
}

/* Table scroll wrapper for responsiveness */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

/* Styles for sortable table headers */
th.sortable-header {
    cursor: pointer;
    position: relative;
    /* Add extra padding on the right to make space for the sort indicator */
    padding-right: 24px;
    user-select: none; /* Prevent text selection when clicking */
}

th.sortable-header::after {
    content: ' \2195'; /* Up-down arrow character */
    /* Use a lighter shade of the header background for the inactive arrow */
    color: #aab6fe; /* This color might need adjustment based on your Tailwind palette */
    position: absolute;
    right: 8px; /* Adjust position as needed */
}

th.sortable-header.sort-asc::after {
    content: ' \25B2'; /* Up arrow */
    color: #ffffff; /* Use bright white for the active sort indicator */
}

th.sortable-header.sort-desc::after {
    content: ' \25BC'; /* Down arrow */
    color: #ffffff; /* Use bright white for the active sort indicator */
}

/* Specific styles for the detailed standings table */
.detailed-standings td, .detailed-standings th {
    text-align: center;
    vertical-align: middle;
}

.detailed-standings th {
    background-color: #3b82f6; /* Tailwind blue-500 */
    color: #ffffff; /* Tailwind white */
}

/* Left-align the Pos and Driver name columns in the RBR view */
.detailed-standings tbody td:first-child,
.detailed-standings tbody td:nth-child(2) {
    text-align: left;
}

/* Left-align the individual round data cells in the RBR view */
.detailed-standings .round-data {
    text-align: left;
    padding-left: 15px; /* Add some padding for better spacing */
}

/* Vertically align specific RBR headers to the bottom */
.detailed-standings th.valign-bottom {
    vertical-align: bottom !important;
    padding-bottom: 12px; /* Add padding to lift text off the bottom border */
}

/* Vertically align specific RBR data cells to the bottom */
.detailed-standings tbody td:first-child,
.detailed-standings tbody td:nth-child(2) {
    vertical-align: bottom;
}

/* Center align the final 'Total (Drop)' column */
.detailed-standings tbody td:last-child {
    vertical-align: middle;
}

/* Container for FLP/Penalty details in RBR view to prevent style inheritance */
.round-details-container {
    font-size: smaller;
    line-height: 1.2;
}

/* Style for the detailed points breakdown in RBR view */
.round-breakdown {
    font-size: smaller;
    white-space: nowrap;
}