/* General body and theme styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Make the graph responsive */
#cluster-map {
    width: 100%;
    height: 100%;
}

/* Layout for the main container */
.app-container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

/* Sidebar styles */
.sidebar {
    width: 25%; /* Initial width */
    min-width: 200px; /* Minimum width */
    max-width: 800px; /* Maximum width */
    padding: 15px;
    display: flex;
    flex-direction: column;
    background-color: #2a2a2a; /* Dark background for the sidebar */
    overflow: hidden; /* Prevent the entire sidebar from scrolling */
    border-right: 2px solid #444;
    position: relative;
}

/* Draggable resize handle */
.resize-handle {
    width: 10px;
    height: 100%;
    background-color: #1a1a1a;
    cursor: col-resize;
    position: absolute;
    right: -5px; /* Position it slightly over the border */
    top: 0;
    z-index: 10;
}

/* Main content area for the map */
.main-content {
    flex-grow: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

/* Accordion styles to match the dark theme */
.accordion-button {
    background-color: #343a40;
    color: #f8f9fa;
}

.accordion-button:not(.collapsed) {
    color: #f8f9fa;
    background-color: #007bff;
}

.accordion-body {
    background-color: #212529;
    color: #f8f9fa;
    max-height: 200px; /* Make keyword lists scrollable */
    overflow-y: auto;
}

.accordion-item {
    border: 1px solid #444;
}

/* Style for the keyword list inside the accordion */
.keyword-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.keyword-list li {
    padding: 2px 5px;
    border-bottom: 1px solid #333;
}

/* Styles for the detailed keyword list container */
.keyword-detail-list-container {
    flex-grow: 1; /* Allows the container to fill the available space */
    overflow-y: auto; /* Makes the list scrollable */
    padding-right: 10px; /* Prevents scrollbar from overlapping content */
    height: 100%; /* Ensure it has a defined height to scroll within */
}

/* Styles for the keyword list in the detail view */
.keyword-list-detail {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.keyword-list-detail li {
    padding: 4px 8px;
    border-bottom: 1px solid #444;
    font-size: 0.95rem;
}