/* Learning Graph Viewer Styles */

/* ================================
   RESET AND BASE STYLES
   ================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: #f5f5f5;
    overflow: hidden;
}

/* ================================
   MAIN LAYOUT CONTAINER
   Uses flexbox for sidebar + graph layout
   ================================ */
.container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* ================================
   SIDEBAR STYLES
   Collapsible sidebar with search, legend, and stats
   ================================ */
.sidebar {
    /* Width settings - adjust for label wrapping */
    width: 230px;
    min-width: 230px;
    /* Visual styling */
    background-color: #fff;
    border-right: 1px solid #ddd;
    /* Flexbox for internal layout */
    display: flex;
    flex-direction: column;
    /* Smooth collapse animation */
    transition: width 0.3s ease, min-width 0.3s ease;
    overflow: hidden;
}

/* Collapsed state - narrow width shows only toggle button */
.sidebar.collapsed {
    width: 50px;
    min-width: 50px;
}

/* ================================
   SIDEBAR HEADER
   Contains title and toggle button
   ================================ */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #5A3EED;    /* Purple header bar, matches course-integration-map accent */
    color: white;
}

.sidebar-header h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;      /* Truncate long titles */
}

/* Hide title when collapsed */
.sidebar.collapsed .sidebar-header h4 {
    display: none;
}

/* ================================
   TOGGLE BUTTON
   Hamburger menu icon for collapse/expand
   ================================ */
.toggle-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    flex-shrink: 0;
}

.toggle-btn:hover {
    background-color: rgba(255,255,255,0.2);
}

/* ================================
   SIDEBAR CONTENT
   Scrollable area containing search, legend, stats
   ================================ */
.sidebar-content {
    flex: 1;
    overflow: hidden;
    padding: 15px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ================================
   SEARCH CONTAINER STYLES
   Type-ahead search for finding concepts
   ================================ */
.search-container {
    margin-bottom: 20px;
    position: relative;
    flex-shrink: 0;
}

.search-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.search-container input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.search-container input:focus {
    outline: none;
    border-color: #5A3EED;
    box-shadow: 0 0 0 3px rgba(90, 62, 237, 0.12);  /* Purple focus ring */
}

/* ================================
   SEARCH RESULTS DROPDOWN
   Positioned absolutely below search input
   ================================ */
.search-results {
    display: none;                    /* Hidden by default */
    position: absolute;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;                     /* Above other content */
    margin-top: 4px;
}

.search-result-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #eee;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #f5f5f5;
}

.result-label {
    font-weight: 500;
    color: #333;
}

/* Category badge in search results */
.result-category {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    color: #333;
    white-space: nowrap;
}

/* ================================
   LEGEND CONTAINER STYLES
   Category filtering with checkboxes
   ================================ */
.legend-container {
    margin-bottom: 20px;
    /* flex-basis: 0 (not auto) is required here -- with "auto" this item's
       height resolves from its own content instead of the space actually
       available in the sidebar, which let it grow to fit all 14 categories
       unclamped and push the stats panel below the viewport on mobile. */
    flex: 1 1 0;
    min-height: 140px;
    display: flex;
    flex-direction: column;
}

.legend-container h5 {
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
    flex-shrink: 0;
}

/* Check All / Uncheck All buttons */
.legend-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.legend-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.legend-btn:hover {
    background: #f0f0f0;
    border-color: #bbb;
}

/* Legend items container - scrolls independently within its own flex slot,
   so it never crowds out the search box above or the stats panel below,
   however many categories or however short the browser window is. */
#legend {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Individual legend item (checkbox + color + label) */
.legend-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    gap: 8px;
}

.legend-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Color swatch box */
.color-box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    flex-shrink: 0;                   /* Don't shrink color box */
}

.legend-item label {
    font-size: 12.5px;
    color: #555;
    cursor: pointer;
    flex: 1;
    line-height: 1.3;
}

/* ================================
   STATISTICS CONTAINER STYLES
   Shows counts of visible nodes, edges, foundational
   ================================ */
.stats-container {
    background-color: #f9f9f9;
    padding: 12px;
    flex-shrink: 0;
    border-radius: 6px;
}

.stats-container h5 {
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

#stats p {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

#stats span {
    font-weight: 600;
    color: #5A3EED;                   /* Purple accent for numbers */
}

/* ================================
   GRAPH CONTAINER STYLES
   Main visualization area
   ================================ */
.graph-container {
    flex: 1;                          /* Take remaining space */
    position: relative;
    background-color: aliceblue;      /* Light blue background */
}

#network {
    width: 100%;
    height: 100%;
}

/* ================================
   GRAPH TOOLBAR
   Floating Reset View / Fit to Screen controls
   ================================ */
.graph-toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 20;
}

.toolbar-btn {
    background: rgba(255,255,255,0.95);
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.toolbar-btn:hover {
    background: #fff;
    border-color: #5A3EED;
    color: #5A3EED;
}

/* ================================
   NODE DETAIL PANEL
   Floating card shown when a concept node is clicked
   ================================ */
.node-detail-panel {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 340px;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 24px);
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    padding: 16px 18px;
    z-index: 30;
}

.node-detail-panel.visible {
    display: block;
}

.close-detail-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #888;
    cursor: pointer;
}

.close-detail-btn:hover {
    color: #333;
}

#node-detail-content h3 {
    font-size: 16px;
    color: #222;
    margin: 0 26px 6px 0;
    line-height: 1.3;
}

#node-detail-content .detail-category-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 12px;
    color: #333;
    margin-bottom: 10px;
}

#node-detail-content .detail-definition {
    font-size: 13.5px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 12px;
}

#node-detail-content .detail-section {
    margin-bottom: 12px;
}

#node-detail-content .detail-section h4 {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
    margin-bottom: 5px;
}

#node-detail-content .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#node-detail-content .chip {
    display: inline-block;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 6px;
    background: #f0f0f5;
    color: #333;
    text-decoration: none;
    border: 1px solid #e0e0e8;
    cursor: pointer;
    transition: all 0.15s;
}

#node-detail-content .chip:hover {
    background: #5A3EED;
    color: #fff;
    border-color: #5A3EED;
}

#node-detail-content .chip.empty {
    color: #aaa;
    background: none;
    border: none;
    cursor: default;
    padding: 0;
}

#node-detail-content .chip.empty:hover {
    background: none;
    color: #aaa;
}

#node-detail-content .detail-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

#node-detail-content .detail-links a {
    color: #5A3EED;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

#node-detail-content .detail-links a:hover {
    text-decoration: underline;
}

#node-detail-content .bloom-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 12px;
    background: #FFF3CD;
    color: #806000;
    border: 1px solid #F0D87A;
}

/* ================================
   RESPONSIVE ADJUSTMENTS
   Mobile-friendly sidebar widths
   ================================ */
@media (max-width: 768px) {
    .sidebar {
        width: 250px;
        min-width: 250px;
    }

    .sidebar.collapsed {
        width: 40px;
        min-width: 40px;
    }

    .node-detail-panel {
        width: calc(100% - 24px);
        /* Leave clear room for the bottom toolbar (moved below) so the
           panel's own box never extends into it, even while scrolled. */
        max-height: calc(100% - 130px);
    }

    /* Move the toolbar to the bottom on narrow screens instead of sitting
       behind the near-full-width detail panel and blocking its buttons.
       Smaller/tighter buttons keep it to one row on most phones. */
    .graph-toolbar {
        top: auto;
        bottom: 12px;
    }

    .toolbar-btn {
        padding: 6px 9px;
        font-size: 11.5px;
    }
}