/* Off-canvas Side Navigation Styles */

/* Overlay styles */
.overlay {
  @apply fixed inset-0 z-40 bg-black transition-opacity duration-300;
}
.overlay.hidden {
  @apply opacity-0 pointer-events-none;
}
.overlay:not(.hidden) {
  @apply opacity-100 pointer-events-auto;
}

/* Navigation Drawer styles */
.side-nav {
  @apply fixed left-0 top-0 z-50 w-72 h-screen overflow-y-auto bg-white border-r border-gray-300 shadow-2xl transform -translate-x-full transition-transform duration-300 ease-in-out flex flex-col px-2;
}
.side-nav[aria-hidden="false"] {
  @apply translate-x-0;
}

#mobile-nav-toggle {
  @apply z-50;
}

@media (min-width: 768px) {
  .overlay {
    display: none !important;
  }
  .side-nav {
    position: relative !important;
    transform: none !important;
    width: 16rem !important; /* md:w-64 */
    box-shadow: none !important;
    border-right: 1px solid #d1d5db !important;
  }
}