/* Desktop-first ERP shell + mobile drawer. Independent of Tailwind purge/cache. */

/* Ensure folded menu sections stay hidden even if Tailwind .hidden is missing/cached. */
#app-sidebar [id^="menu-content-"].hidden {
  display: none !important;
}

/* --- Mobile-only / desktop-only helpers --- */
.only-mobile { display: block; }
.only-desktop { display: none !important; }

@media (min-width: 768px) {
  .only-mobile { display: none !important; }
  .only-desktop { display: block !important; }
  .only-desktop.inline-flex,
  .only-desktop-inline-flex { display: inline-flex !important; }
}

/* --- Sidebar: drawer on small screens, static column on desktop --- */
#app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: 18rem;
  max-width: 85vw;
  transform: translateX(-100%);
  transition: transform 0.2s ease-out;
}

#app-sidebar.is-open {
  transform: translateX(0);
}

#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.4);
}

#sidebar-backdrop.is-open {
  display: block;
}

#sidebar-open-btn,
#sidebar-close-btn {
  display: inline-flex;
}

@media (min-width: 768px) {
  #app-sidebar {
    position: static;
    z-index: auto;
    width: 16rem;
    max-width: none;
    transform: none !important;
    flex-shrink: 0;
  }

  #app-sidebar.is-open {
    transform: none !important;
  }

  #sidebar-backdrop,
  #sidebar-backdrop.is-open {
    display: none !important;
  }

  #sidebar-open-btn,
  #sidebar-close-btn {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  #app-sidebar { width: 18rem; }
}

@media (min-width: 1280px) {
  #app-sidebar { width: 20rem; }
}