.navbar {
  background: #333;
  color: white;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 50px;
  align-items: center;
  z-index: 1000;
}

/* Ensure the sidebar toggle button has some right margin for separation */
#mobile-sidebar-toggle {
    margin-right: 15px;
    /* CRITICAL: Ensure the button doesn't shrink and break the layout */
    flex-shrink: 0;
}

/* --- Scrollable Menu Container --- */

.nav-links-scroll-container {
    /* Takes all available horizontal space between the toggle and the logout button */
    flex-grow: 1;
    /* CRITICAL FIX: Allows the flex item to shrink below its content size, enabling overflow and scrolling */
    min-width: 0;
    /* Enables horizontal scrolling when content exceeds container width */
    overflow-x: auto;
    /* Forces menu items onto a single line */
    white-space: nowrap; 
    
    /* Small padding-bottom to ensure scrollbar is visible if present */
    padding-bottom: 5px; 
    
    /* Optional: Hide scrollbar for cleaner mobile aesthetics */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

/* Hide scrollbar on WebKit browsers (Chrome, Safari) */
.nav-links-scroll-container::-webkit-scrollbar {
    display: none; 
}


/* --- Menu Item Styling --- */

/* Target links inside the scroll container */
.nav-links-scroll-container a {
  color: white;
  text-decoration: none;
  
  /* CRITICAL: Ensures the links behave as blocks but don't force a line break */
  display: inline-block; 
  /* Prevents links from shrinking down on mobile */
  flex-shrink: 0; 
  /* Re-introduces the spacing between links (simulating the old gap) */
  margin-right: 20px;
  
  /* Ensuring proper vertical alignment/click area */
  padding: 0;
}

.nav-links-scroll-container a:hover {
  text-decoration: underline;
}

/* Note on the Logout Form: It is a sibling element in the HTML
   that uses inline style 'margin-left:auto'. For the scroll to work,
   it also needs to be flex-shrink:0. Since we can't add a class
   to the HTML, we assume the logout form is the last element 
   inside the .navbar and the inline style will manage its layout.
*/


/* Active link in the horizontal navbar */
.navbar a.active-link {
    color: #87ceeb; /* Light blue color to stand out */
    background-color: #4f4f4f; /* Subtle background change for visibility */
    text-decoration: none;
    font-weight: bold;
}