body {
    font-family: sans-serif;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}

/* --- Full page layout for no scrolling on details page --- */
body:has(main.details-content-wrapper) {
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

header {
    padding: 1.5em 2em;
    flex-shrink: 0;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

h1 {
    color: #333;
    margin: 0 0 0.5em 0;
}

/* --- New styles for our project description! --- */
.project-description {
    max-width: 800px; /* Keeps lines from being too long to read */
    margin-top: 1em;
    color: #333;
    line-height: 1.6;
}

/* --- Index page wrapper for side-by-side layout --- */
.index-wrapper {
    flex-grow: 1;
    display: flex;
    gap: 2em;
    padding: 2em;
    min-height: 0;
}

/* --- Index page map container --- */
.map-container {
    flex: 1;
    min-width: 300px;
    padding: 1em;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
}
.map-container h2 {
    margin-top: 0;
}
.map-container img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* --- Index page table container --- */
.table-container {
    flex: 2;
    min-width: 400px;
    overflow-y: auto;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

thead tr {
    background-color: #007bff;
    color: white;
    position: sticky;
    top: 0;
}

/* --- Sorting Indicator Styles --- */
th.sortable-header { cursor: pointer; position: relative; }
th.sortable-header:hover { background-color: #0069d9; }
th.sortable-header::before, th.sortable-header::after { content: ''; position: absolute; right: 15px; opacity: 0.3; border: 5px solid transparent; }
th.sortable-header::before { bottom: 50%; margin-bottom: 1px; border-bottom-color: white; }
th.sortable-header::after { top: 50%; margin-top: 1px; border-top-color: white; }
th.sorted-asc::before { opacity: 1; }
th.sorted-desc::after { opacity: 1; }

tbody tr:nth-of-type(even) { background-color: #f3f3f3; }
tbody tr:hover { background-color: #e2e2e2; cursor: pointer; }

/* --- Styles for the station detail page --- */
.back-link { display: inline-block; margin-bottom: 1em; color: #007bff; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.trend-summary { margin-top: 1em; padding: 1em; background-color: #e9ecef; border-radius: 5px; display: inline-block; }
.trend-summary p { margin: 0.5em 0; font-size: 1.1em; }
.trend-summary span.increase { color: #dc3545; }
.trend-summary span.decrease { color: #28a745; }
.details-content-wrapper { flex: 1; display: flex; gap: 2em; padding: 2em; min-height: 0; }
.chart-container { position: relative; flex: 2; min-width: 400px; padding: 1em; background-color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 5px; }
.station-map-container { flex: 1; min-width: 300px; padding: 1em; background-color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 5px; }
.station-map-container h2 { margin-top: 0; }
.station-map-container img { width: 100%; height: auto; border-radius: 4px; }
.chart-tooltip { opacity: 0; position: absolute; background: rgba(0, 0, 0, 0.7); color: white; padding: 8px; border-radius: 4px; pointer-events: none; transform: translate(10px, -20px); transition: opacity 0.1s ease; white-space: nowrap; }