/* css/mobile.css — Mobile / responsive overrides */

/* ── Hamburger button ── */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 40px; height: 40px; background: none; border: none;
  cursor: pointer; padding: 6px; border-radius: 6px; margin-right: 6px;
  flex-shrink: 0;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px; transition: all 0.22s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Overlay backdrop ── */
.nav-overlay {
  display: none; position: fixed; inset: 56px 0 0 0;
  background: rgba(0, 0, 0, 0.55); z-index: 299;
  -webkit-tap-highlight-color: transparent;
}
.nav-overlay.open { display: block; }

/* ── Sidebar mobile footer (hidden on desktop) ── */
.sidebar-mobile-footer { display: none; }

/* ── Mobile breakpoint ── */
@media (max-width: 900px) {
  /* Show hamburger */
  .hamburger { display: flex; }

  /* Hide desktop nav items */
  .nav-hide-mobile  { display: none !important; }
  .nav-user-name    { display: none !important; }
  .nav-role-badge   { display: none !important; }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed !important;
    top: 56px; left: 0;
    height: calc(100vh - 56px);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
    overflow-y: auto;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.35);
  }

  /* Show footer links inside the sidebar */
  .sidebar-mobile-footer {
    display: block !important;
    margin-top: auto;
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }

  /* Main content fills the width */
  .app-layout { flex-direction: column; }
  .main-content { width: 100% !important; min-width: 0 !important; }
}