html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    display: grid;
    grid-template-columns: 300px 1fr; /* sidebar + main */
    height: 100vh;
    transition: grid-template-rows 0.3s ease;
}

/* Sidebar */
#routes {
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
    background-color: #222;
    color: white;
}

#routes ul {
    padding: 0;
    list-style: none;
}

#routes li {
    padding: 10px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    background: #333;
    cursor: pointer;
    border-radius: 4px;
}

#routes li:hover { background: #444; }
#routes li.active { background: #555; }

/* Map */
#map {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    width: 100%;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Details & Images hidden by default */
#details, #images {
    display: none;
    background-color: #004344;
    color: #00bec1;
    transition: all 0.3s ease;
}

#images {
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

/* Full map before selection */
#container.full-map {
    grid-template-rows: 1fr; /* only top row */
}

#container.full-map #map {
    grid-column: 2;
    grid-row: 1;
}

/* Show details/images when route selected */
#container.show-details {
    grid-template-rows: 1fr 225px; /* top map, bottom details/images */
}

#container.show-details #map {
    grid-column: 2;
    grid-row: 1;
}

#container.show-details #details {
    display: block;
    grid-column: 1;
    grid-row: 2;
}

#container.show-details #images {
    display: block;
    grid-column: 2;
    grid-row: 2;
}

.route-image {
    border-radius: 6px;
    cursor: pointer;
    height: 200px;
    flex-shrink: 0;
}