/* =========================================
   Left Sidebar Navigation
   - Persistent background color
   - Scrollable nav content
   - Sticky on desktop, collapse-friendly on mobile
   ========================================= */

/* ---- Themeable variables ---- */
:root {
  /* Sidebar background (light blue). Tweak to your brand color. */
  --sidebar-bg: #cfe8f7; /* pick the exact shade you want */
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-top-offset: 12px; /* space below header for sticky */
}

/* Critical so overflow/scroll can work inside Bootstrap's flex grid */
#guidelines,
.sidebar-nav {
  min-height: 0;
}

/* Always paint the column with the background color */
.sidebar-nav {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
}

/* The inner wrapper that will scroll when content exceeds viewport */
.sidebar-nav .nav-section {
  /* Ensure we always show a tall colored panel even with little content */
  min-height: calc(100vh - 24px);
  /* And clamp to viewport when content is long (scroll inside) */
  max-height: calc(100vh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  /* Inherit background so it looks solid during scroll */
  background: inherit;
}

/* Mobile: when the collapse is open, still constrain to viewport height */
.sidebar-nav.collapse.show .nav-section {
  min-height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
}

/* Desktop/Large screens: make the sidebar sticky and full-height panel */
@media (min-width: 992px) {
  .sidebar-nav {
    position: sticky;
    top: var(--sidebar-top-offset);
    align-self: flex-start;

    /* Create a full-height colored column (minus the sticky offset).
       We use flex so the .nav-section can fill and scroll. */
    height: calc(100vh - var(--sidebar-top-offset));
    display: flex;
    flex-direction: column;
  }

  .sidebar-nav .nav-section {
    /* Fill the sticky column and scroll inside */
    min-height: 0;
    max-height: none;
    height: 100%;
    overflow: auto;
  }
}

/* If you have a fixed header (e.g., 72px), uncomment and set exact height:
:root { --sidebar-top-offset: 72px; }
*/

/* =========================================
   Nav list + disclosure controls (from earlier)
   ========================================= */

.guidelines-nav ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.guidelines-nav .nav-item > .nav-row,
.guidelines-nav .nav-item > .nav-link {
  min-height: 40px; /* comfortable tap target */
}

/* Indentation for nested lists */
.guidelines-nav .nav.flex-column .nav.flex-column {
  padding-left: 1rem; /* ~Bootstrap ps-3 */
}

/* Toggle button (plus/minus) */
.guidelines-nav .nav-toggle {
  line-height: 1;
  border: 0;
  background: transparent;
  text-decoration: none;
  padding: 0 .25rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Active/open emphasis */
.guidelines-nav .nav-item.is-open > .nav-row > .nav-link,
.guidelines-nav .nav-item .nav-link.active {
  font-weight: 600;
}

/* Hide submenus when using [hidden] attribute */
.guidelines-nav ul[hidden] {
  display: none !important;
}

/* =========================================
   Optional: nicer scrollbars
   ========================================= */

/* Chromium/Edge/WebKit */
.sidebar-nav .nav-section::-webkit-scrollbar {
  width: 10px;
}
.sidebar-nav .nav-section::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidebar-nav .nav-section::-webkit-scrollbar-track {
  background: transparent;
}

/* Firefox */
.sidebar-nav .nav-section {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
}