/* ==========================================================================
   Turbo progress bar
   ========================================================================== */
.turbo-progress-bar {
  background: #3b82f6; /* Tailwind-ish brand blue */
  height: 3px;
}

/* ==========================================================================
   Sticky header (global)
   ========================================================================== */

/* Fixed admin header */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1049; /* below Bootstrap modals (1050+) */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Tiny elevation when scrolled (optional) */
#header.sticky-elevated {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Spacer to prevent layout jump under fixed header.
   Height may be set via JS on --header-offset */
#header-spacer {
  display: block;
  height: var(--header-offset, 64px);
}

/* If you prefer global padding instead of spacer, uncomment:
html.has-fixed-header body { padding-top: var(--header-offset, 64px); }
*/

/* ==========================================================================
   Sidebar: fixed rail + independent inner scrolling
   ========================================================================== */

/* Anchor the sidebar to the viewport under the sticky header */
#menu.sidebar {
  position: fixed;
  left: 0;
  top: var(--header-offset, 64px);
  bottom: 0;
  height: calc(100vh - var(--header-offset, 64px));
  min-height: 0 !important;         /* override any large inline min-height */
  display: flex;
  flex-direction: column;
  overflow: hidden;                  /* contain the inner scroller */
  z-index: 1040;                     /* below header, above page content */
}

@supports (height: 100dvh) {
  #menu.sidebar {
    height: calc(100dvh - var(--header-offset, 64px));
  }
}

/* Profile block keeps natural height (non-scroll) */
#menu .sidebar-user-profile {
  flex: 0 0 auto;
}

/* The menu list is the ONLY scrollable area in the sidebar */
#menu .nav.metis-menu {
  flex: 1 1 auto;                    /* take the remaining height */
  min-height: 0;                     /* required for overflow in flex items */
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  overscroll-behavior: contain;      /* prevent wheel from scrolling page */
  padding-bottom: .5rem;             /* keep last item visible */
}

/* Avoid accidental horizontal scrolling from nested items */
#menu .nav.metis-menu .nav-second-level { overflow: visible; }

/* Optional subtle top separator when list scrolls */
#menu .nav.metis-menu::after {
  content: "";
  position: sticky;
  top: 0;
  height: 0;
  display: block;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.06);
}

/* ==========================================================================
   Setup / Customizer drawer (#setup-menu-wrapper)
   Ensure it shows ABOVE the left fixed sidebar and BELOW the sticky header
   ========================================================================== */

#setup-menu-wrapper {
  position: fixed !important;
  top: var(--header-offset, 64px) !important; /* under sticky header */
  left: 0;
  right: auto;
  bottom: 0;
  z-index: 3001 !important;                  /* above sidebar & overlay */
  /* width/animation controlled by theme; no overrides here */
}

/* Overlay sits below the drawer but under the header */
.control-sidebar-bg {
  position: fixed;
  top: var(--header-offset, 64px);
  left: 0; right: 0; bottom: 0;
  z-index: 3000 !important;
}

/* When the body class is applied (theme open state), guarantee visibility */
body.control-sidebar-open #setup-menu-wrapper {
  transform: none !important;
  visibility: visible !important;
  display: block !important;
}

html[dir="rtl"] #setup-menu-wrapper {
  left: 0; right: auto;
}

/* ==========================================================================
   (Optional) Fallback styles if you ever revert to sticky sidebar
   ========================================================================== */
/*
#menu.sidebar {
  position: sticky;
  top: var(--header-offset, 64px);
  max-height: calc(100vh - var(--header-offset, 64px));
}
#menu .nav.metis-menu { overflow-y: auto; }
*/