/* Project-specific overrides that sit on top of the Tailwind CDN. */
:root { --hrms-accent: #2563eb; }

html { scroll-behavior: smooth; }

[x-cloak] { display: none !important; }

/* -------- Responsive sidebar drawer --------------------------------------
   On wide screens the sidebar is a static column (default flex layout). Below
   768px it becomes an off-canvas drawer that slides in over a backdrop, opened
   by the navbar hamburger. Driven by a single .is-open class toggled in JS so
   it does not depend on hand-maintained Tailwind utilities. */
@media (max-width: 767px) {
  #app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
  }
  #app-sidebar.is-open {
    transform: translateX(0);
  }
  /* Keep the header (and its close button) in view while the menu scrolls. */
  #sidebar-header {
    position: sticky;
    top: 0;
    background: rgb(30 41 59); /* matches bg-slate-800 */
    flex-shrink: 0;
  }
  #sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 30;
  }
  #sidebar-backdrop.hidden {
    display: none;
  }
}

/* Drawer controls (hamburger + close button) show only on small screens. */
.drawer-control { display: none; }
@media (max-width: 767px) {
  .drawer-control { display: inline-flex; }
}

/* At >=768px the drawer controls and backdrop never show, and the sidebar is
   always a normal in-flow column regardless of any lingering .is-open. */
@media (min-width: 768px) {
  #sidebar-backdrop { display: none; }
  #app-sidebar { transform: none; }
  .drawer-control { display: none; }
}