/*mar16 define shared colors as CSS custom properties */
:root {
    --color-coffee: #7a2e02;
    --color-landmark: #fff700;
    --color-park: #008000;
    --color-recreation: #0026ff;
    --color-fall-route: #DC7633;
    --color-spring-route: #febcd0;
    --color-summer-route: #F5B041;
    --color-winter-route: #5DADE2;
    --color-washroom: #1565C0;
    --color-fountain: #00838F;
    --color-bench: #2E7D32;
}

.map {
    position: absolute;
    top: 0;
    bottom: 0;
    /*mar16 fix invalid left/right: auto to proper values */
    left: 0;
    right: 0;
    width: 100%;
}


/*mar29 panel sidebar — replaces .controls */
.sidebar {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
    width: 270px;
}

/*apr10 Bootstrap md breakpoint (>=768px), sidebar already at 270px, no change needed */
/*apr10 Bootstrap sm breakpoint (<768px), narrow sidebar on tablet/phone */
@media (max-width: 767.98px) {
    .sidebar {
        width: 220px;
    }
}

@media (max-width: 575.98px) {
    .sidebar {
        width: 180px;
        top: 10px;
        left: 10px;
    }
}

/*apr10 Scrollable container for route panels when more routes are added, works on all screen sizes */
.panels-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    /* reserves space for amenities panel (~90px) and sidebar top offset and padding */
    max-height: calc(100vh - 160px);
}

.route-panel {
    display: flex;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s, background 0.2s, border-color 0.2s;
    opacity: 1;
    border: 2px solid var(--panel-color, #ccc);
}

.route-panel:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.route-panel.active {
    opacity: 1;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.panel-stripe {
    display: none;
}

.route-panel.active .panel-stripe {
    display: none;
}

.panel-body {
    padding: 10px 12px;
    flex: 1;
    min-width: 0;
}

.panel-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.panel-title {
    font-weight: 700;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #222;
}

.panel-desc {
    font-size: 11px;
    color: #555;
    font-family: Arial, sans-serif;
    margin: 0 0 7px 0;
    line-height: 1.4;
}

.panel-stops {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #777;
    font-family: Arial, sans-serif;
}

.stop-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--panel-color, #ccc);
    flex-shrink: 0;
}

.stop-line {
    flex: 1;
    height: 1px;
    background-color: var(--panel-color, #ccc);
    opacity: 0.45;
}

.stop-name {
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amenities-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

.amenities-title {
    font-weight: 700;
    font-size: 11px;
    color: #555;
    margin: 0 0 7px 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.amenity-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    color: #333;
    cursor: pointer;
}


/*Legend Stuff*/
.legend {
    position: absolute;
    bottom: 35px;
    right: 25px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 10;
}

.legend h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

.legend div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* temporary fix: replaced colored circles with Maki SVG img tags to match actual map icons */
.legend-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: middle;
}

/* temporary fix: CSS filter tints match icon-color values in CITY_LAYERS config */
/* .legend-icon--washroom { filter: invert(16%) sepia(98%) saturate(1200%) hue-rotate(210deg) brightness(90%); } → #1565C0 */
/* .legend-icon--fountain { filter: invert(35%) sepia(80%) saturate(600%) hue-rotate(155deg) brightness(90%); }  → #00838F */
/* .legend-icon--bench    { filter: invert(30%) sepia(60%) saturate(500%) hue-rotate(100deg) brightness(80%); }  → #2E7D32 */

.legend-item {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.legend-route {
    width: 20px;
    height: 4px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 2px;
}


/* Route Legend colors*/
.Fall {
    background-color: var(--color-fall-route);
}
.Spring {
    background-color: var(--color-spring-route);
}
.Summer {
    background-color: var(--color-summer-route);
}
.Winter {
    background-color: var(--color-winter-route);
}


/* zoom to full extent control button */
.zoom-extent-btn {
    width: 29px;
    height: 29px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
}
.zoom-extent-btn::before {
    content: '⊕';
}