/* ── Offcanvas navigation ───────────────────────────────────────────────────── */

/* Panel width */
#navOffcanvas {
  width: 300px;
}

/* Vertical nav links inside offcanvas */
#navOffcanvas .navbar-nav {
  flex-direction: column;
  width: 100%;
}
#navOffcanvas .navbar-nav .nav-link {
  padding: 0.6rem 0.5rem;
  border-radius: 6px;
  font-size: 1rem;
}
#navOffcanvas .navbar-nav .nav-link:hover,
#navOffcanvas .navbar-nav .nav-link.active {
  background: #f0f4ff;
  color: #0d6efd;
}

/* Dropdowns inside offcanvas — static, no shadow, indented */
#navOffcanvas .dropdown-menu {
  position:   static !important;
  box-shadow: none !important;
  border:     none;
  background: transparent;
  padding:    0 0 0 1rem;
  margin:     0;
}
#navOffcanvas .dropdown-toggle::after {
  float: right;
  margin-top: 0.4em;
}
#navOffcanvas .dropdown-item {
  border-radius: 6px;
  padding: 0.45rem 0.5rem;
  font-size: 0.95rem;
}
#navOffcanvas .dropdown-item:hover,
#navOffcanvas .dropdown-item.active {
  background: #f0f4ff;
  color: #0d6efd;
}

/* Mega menu on mobile — collapse to simple vertical list */
@media (max-width: 991.98px) {
  #navOffcanvas .dropdown-menu > .row {
    display:        flex;
    flex-direction: column;
    gap:            0;
  }
  #navOffcanvas .dropdown-menu > .row > [class*="col"] {
    width: 100%;
    padding: 0;
  }
  #navOffcanvas .dropdown-menu p.fw-semibold {
    font-size: 0.75rem;
    margin: 0.5rem 0 0.2rem;
    padding-left: 0.5rem;
  }
}

/* Auth nav inside offcanvas — stack vertically */
#navOffcanvas .d-flex.gap-2 {
  flex-direction: column;
  align-items:    stretch;
}
#navOffcanvas .d-flex.gap-2 a {
  text-align: center;
}

/*************************************/

#navOffcanvas .offcanvas-body {
  background: #212529; /* same as bg-dark */
}
#navOffcanvas .navbar-nav .nav-link {
  color: rgba(255,255,255,.85);
}
#navOffcanvas .navbar-nav .nav-link:hover,
#navOffcanvas .navbar-nav .nav-link.active {
  background: rgba(255,255,255,.1);
  color: #fff;
}
#navOffcanvas .dropdown-item {
  color: rgba(255,255,255,.75);
}
#navOffcanvas .dropdown-item:hover,
#navOffcanvas .dropdown-item.active {
  background: rgba(255,255,255,.1);
  color: #fff;
}