/* static/css/sidebar.css */

/* --- Desktop/Base Styles --- */
#sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #333; 
    color: white; 
    padding-top: 60px; 
    overflow-y: auto; 
    transition: transform 0.3s ease; /* Adjusted transition for mobile slide */
    z-index: 50;
}

#sidebar a {
    color: #fff; 
    text-decoration: none; 
}

/* Base style for the clickable wrapper */
#sidebar .node-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    cursor: pointer;
    line-height: 1.4;
}

#sidebar .node-wrapper a {
    flex-grow: 1; /* Allows link text to take up available space */
}

#sidebar .node-wrapper:hover {
    background-color: #444;
}

/* 1. Collapsible List Container */
#sidebar .collapsible-content {
    list-style: none;
    padding: 0;
    margin: 0;
    /* CRITICAL: Hides the content by default and enables animation */
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Fix for nested list indentation (applies to the list items, not the list itself) */
#sidebar ul {
    list-style: none;
    padding-left: 15px; /* Adds indentation to nested lists */
    margin: 0;
}

/* 2. Expanded State */
#sidebar .sidebar-node.expanded > .collapsible-content {
    /* CRITICAL: Must be large enough to hold all content */
    max-height: 2000px; 
}

/* 3. Collapse Icon */
.collapse-toggle {
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid white;
    transition: transform 0.2s ease;
}
/* Rotate icon when expanded */
.sidebar-node.expanded > .node-wrapper .collapse-toggle {
    transform: rotate(90deg);
}

/* 4. Active Link Styles (for current page) */
#sidebar a.active-link {
    background-color: #4f4f4f; /* Subtle background highlight */
    color: #87ceeb; /* Light blue color to stand out */
    font-weight: bold;
    border-radius: 4px;
}

/* 5. Transition Suppression (No-Flicker Fix) */
#sidebar ul.sidebar-loading .collapsible-content {
    transition: none !important;
}

/* 6. Sidebar Search Styles (NEW) */


.content {
    margin-left: 250px; 
    padding: 20px;
    transition: margin-left 0.3s ease;
}

/* Hide the toggle button by default (desktop view) */
.sidebar-toggle-btn {
    display: none; 
}


/* 🧼 Global Search Input Styling */
#global-sidebar-search {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 14px;
  color: white;
  background-color: #2a2a2a;
  border: 1px solid #555;
  border-radius: 4px;
  box-sizing: border-box;
}

#global-sidebar-search::placeholder {
  color: #aaa;
}

/* 🔽 Result List */
#global-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #444;
  background-color: #2a2a2a;
  max-height: 250px;
  overflow-y: auto;
  border-radius: 4px;
  z-index: 100;
  position: relative;
}

/* 🧭 Result Items */
#global-search-results li a {
  display: block;
  padding: 8px 12px;
  color: white;
  text-decoration: none;
}

#global-search-results li a:hover {
  background-color: #444;
}

/* ⚠️ No Match Message */
#global-search-results .no-match {
  padding: 8px 12px;
  color: #bbb;
  font-style: italic;
}






#tag-result-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;

  max-height: 300px;        /* or 40vh, or any unit you prefer */
  overflow-y: auto;
  padding-right: 0.5rem;    /* optional: prevent scrollbar overlap */
}


#tag-result-links a {
  display: inline-block;
  background-color: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  font-family: monospace;
  white-space: nowrap;
}

#tag-result-links a:hover {
  background-color: #ddd;
}

#tag-result-links a.result-link.active-result {
  display: inline-flex;
  align-items: center;
  background-color: #2d9cdb !important;
  color: white !important;
  font-weight: bold;
  border-radius: 6px;
  padding: 4px 10px;
  line-height: 1;
  text-decoration: none;
}

#tag-result-links a.result-link {
  transition: background-color 0.3s;
}

#tag-result-links::-webkit-scrollbar {
  width: 6px;
}

#tag-result-links::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}