/**
 * Lexi Sidebar — custom CSS
 *
 * Tailwind handles the bulk of the sidebar styling via utility classes.
 * Only non-Tailwind specifics live here.
 */

/* Prevent layout shift: reserve the mini-width before JS runs */
@media (min-width: 768px) {
  .lx-hdr {
    margin-inline-start: 5rem !important; /* w-20 — mini sidebar width */
  }

  #lexi-content-header {
    padding-inline-start: 5rem !important; /* Reserve mini sidebar offset before JS */
  }
  
  #lexi-content-main {
    padding-inline-start: 5rem !important; /* w-20 — mini sidebar width */
  }

    #lexi-content-footer {
    padding-inline-start: 5rem !important; /* w-20 — mini sidebar width */
  }
}

/* Consistent pointer cursor across all interactive sidebar elements */
#lexi-sidebar button,
#lexi-sidebar a,
#lexi-sidebar .hs-accordion-toggle,
#lexi-sidebar .hs-dropdown-toggle,
#lexi-sidebar .sidebar-mini-group-btn {
  cursor: pointer !important;
}

/* Full sidebar accordion submenu divider line */
#lexi-sidebar .hs-accordion-content > ul {
  position: relative;
}

#lexi-sidebar .hs-accordion-content > ul::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  inset-inline-start: 0.875rem;
  width: 1px;
  background-color: var(--sidebar-nav-list-divider);
}

#lexi-sidebar .hs-accordion-content > ul > li {
  position: relative;
  z-index: 1;
}

/* Parent active state styling (HS Accordion) */
#lexi-sidebar .hs-accordion.active > .hs-accordion-toggle {
  background-color: var(--sidebar-nav-hover);
}

/* Sidebar overlay backdrop ────────────────────────────────────────────
   Shown on mobile when the sidebar is in its expanded/full state.
   Uses the same pattern as Preline's hs-overlay backdrop: a fixed overlay
   that fades in/out via opacity transitions so it never causes layout shift.
   ──────────────────────────────────────────────────────────────────────── */
#lexi-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59; /* one below the sidebar's z-60 */
  background-color: rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  cursor: pointer;
}

#lexi-sidebar-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}