/* Sidebar Navigation Styles */
.sidebar-navigation {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    z-index: 100;
}

.sidebar-nav-btn {
    padding: 8px 12px;
    border: 1px solid #f1f1f1;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    min-width: 100px;
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.sidebar-nav-btn:hover:not(:disabled) {
    background: #002664;
    color: white;
}

.sidebar-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sidebar-nav-info {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    text-align: center;
    flex: 1;
    padding: 0 10px;
}

.sidebar-nav-current {
    font-weight: 600;
    margin-bottom: 2px;
    color: #333;
}

.sidebar-nav-counter {
    font-size: 11px;
    color: #888;
}

.sidebar-nav-text {
    margin: 0 4px;
}

/* Ensure sidebar panels have relative positioning and bottom padding for navigation */
[id^="sidebarLvl2Cat"] {
    position: relative;
    padding-bottom: 80px;
}

    /* Adds spacing between accordion items */
    .map-sidebar-panel-body .accordion .card {
        margin-bottom: 1rem;
    }

    /* Custom Button Colors */
    .btn-overview { background-color: #146CFD; color: white; border: 1px solid #1056c9; }
    .btn-biodiversity { background-color: #00AA45; color: white; border: 1px solid #008236; }
    .btn-heritage { background-color: #FF8C00; color: white; border: 1px solid #d97600; }
    .btn-landscape { background-color: #4682B4; color: white; border: 1px solid #3a6a94; }
    .btn-traffic { background-color: #8055F1; color: white; border: 1px solid #6a43d0; }
    .btn-noise { background-color: #FAAF05; color: white; border: 1px solid #d99604; }

    /* Darken buttons on hover for better user feedback */
    .btn-overview:hover { background-color: #1056c9; color: white; }
    .btn-biodiversity:hover { background-color: #008236; color: white; }
    .btn-heritage:hover { background-color: #d97600; color: white; }
    .btn-landscape:hover { background-color: #3a6a94; color: white; }
    .btn-traffic:hover { background-color: #6a43d0; color: white; }
    .btn-noise:hover { background-color: #d99604; color: white; }

    /* Accordion Button Styling for Chevron alignment */
    .card-header .btn-link {
        width: 100%;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
    }
     .card-header .btn-link:hover {
        text-decoration: none;
    }

    /* Chevron Styling */
    .accordion-chevron {
        transition: transform 0.3s ease;
        font-size: 0.9rem;
    }

    .btn-link[aria-expanded="true"] .accordion-chevron {
        transform: rotate(180deg);
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar-navigation {
        padding: 10px;
        gap: 5px;
    }
    
    .sidebar-nav-btn {
        font-size: 11px;
        padding: 6px 8px;
        min-width: 80px;
        max-width: 100px;
    }
    
    .sidebar-nav-info {
        font-size: 11px;
        padding: 0 5px;
    }
    
    [id^="sidebarLvl2Cat"] {
        padding-bottom: 70px;
    }
}

@media (min-width: 1280px) {
    .ca-map {
        height: calc(100vh - 87px);
    }
}