/* races.css */

/* Specific styling for the races table */
#races table {
    max-width: 1000px; /* Increased from 280px for better readability */
    width: 95%; /* Responsive width */
    margin: 20px auto; /* Centered with spacing */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 6px; /* Matches other elements */
    overflow: hidden; /* Ensures rounded corners apply to content */
    background-color: var(--white); /* Consistent background */}

/* Header styling */
#races th {
    background-color: var(--red); /* Uses your red accent */
    color: var(--white); /* White text for contrast */
    font-weight: 600; /* Slightly less bold than bold */
    text-transform: uppercase; /* Makes headers stand out */
    font-size: 0.9rem; /* Slightly smaller for hierarchy */
    padding: 14px 10px; /* Adjusted padding */
}

/* Cell styling */
#races td {
    padding: 12px 10px; /* Consistent padding */
    font-size: 0.85rem;
    color: var(--dark-gray);
}

/* Alternating row colors */
#races tr:nth-child(even) {
    background-color: var(--light-gray); /* Softer contrast than #fafafa */
}

/* Hover effect */
#races tr:hover {
    background-color: var(--bright-gray); /* Slightly darker hover */
    cursor: default; /* Indicates non-clickable rows */
}

/* Specific column styling */
#races td:nth-child(1) { /* Date column */
    min-width: 100px; /* Increased from 100px to fit full date */
    white-space: nowrap; /* Prevents date from wrapping */
    color: var(--red);
}

#races td:nth-child(2) { /* Race column */
    color: var(--dark-gray); /* Blue to differentiate */
    min-width: 220px; /* Ensures space for longer race names */

}

#races td:nth-child(8), 
#races td:nth-child(9) { /* Peak Flow columns */
    color: var(--red); /* Highlights peak flow with accent color */
}

#races td:nth-child(1) {
    /* Make dates slightly smaller and monospaced. */
    font-size: small;
    font-family: "Roboto Mono", monospace;
}

#races td:nth-child(n+5) { 
    /* Make time columns + Peak Flow columns monospace */
    font-family: "Roboto Mono", monospace;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    #races table {
        width: 100%;
        font-size: 0.9rem; /* Slightly smaller text */
    }

    #races th,
    #races td {
        padding: 8px 6px; /* Reduced padding for smaller screens */
    }

    /* Stack table for very small screens */
    #races table {
        display: block;
        overflow-x: auto; /* Horizontal scroll if needed */
        white-space: nowrap; /* Prevents text wrapping */
    }

    #races td:nth-child(1) { /* Date column */
        min-width: 110px; /* Slightly reduced for smaller screens */
    }
}

@media (max-width: 450px) {
    #races th,
    #races td {
        font-size: 0.8rem; /* Even smaller text */
    }

    #races td:nth-child(1) { /* Date column */
        min-width: 100px; /* Minimum width for very small screens */
    }

    #races td:nth-child(2) {
        min-width: 120px; /* Adjust for smaller screens */
    }
}