/* Mobile Sidebar Fix */
@media (max-width: 768px) {
  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: -280px !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 999 !important;
    background: #ffffff !important;
    border-left: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease !important;
  }

  .app-sidebar.open {
    transform: translateX(-280px) !important;
  }

  .sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
  }

  .sidebar-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide header navigation on mobile */
  .app-header .flex.items-center.gap-md {
    display: none !important;
  }

  /* Show only hamburger and title */
  .app-header .flex.items-center.gap-lg > div:first-child {
    width: 100% !important;
  }

  .app-header h1 {
    font-size: 1.125rem !important;
  }

  /* Dark mode */
  [data-theme="dark"] .app-sidebar {
    background: #2d2d2d !important;
    border-left: 1px solid #3b3a39 !important;
  }
}

/* Font icons instead of SVG */
.nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.nav-item:hover {
  background: var(--bg-tertiary) !important;
  color: var(--accent-primary) !important;
}

.nav-item.active {
  background: var(--accent-primary) !important;
  color: white !important;
}

/* Sidebar toggle button */
.sidebar-toggle {
  padding: 8px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
  color: var(--text-primary) !important;
}

.sidebar-toggle:hover {
  background: var(--bg-tertiary) !important;
}