/* Mobile-only overrides — loaded after app-theme.css via <link> */

.mobile-hamburger {
  display: none;
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
  color: #475569;
}

.mobile-sidebar-backdrop {
  display: none;
}

@media (max-width: 767px) {
  .mobile-hamburger {
    display: flex !important;
  }

  .app-sidebar {
    position: fixed !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 280px !important;
    z-index: 40 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12) !important;
    border-right: none !important;
    transform: translateX(-100%) !important;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .app-sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  .mobile-sidebar-backdrop {
    display: block !important;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 35;
    background: rgba(0,0,0,0.3);
  }

  .main-pane {
    margin-left: 0 !important;
    padding: 12px !important;
  }

  .metric-grid,
  .metric-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .two-col {
    grid-template-columns: 1fr !important;
  }
}