/* MOBILE RESPONSIVE — app.rinet.one */
@media (max-width: 768px) {
  /* Side nav hidden by default */
  .vnav { display: none !important; width: 0 !important; }
  .vnav-open { display: flex !important; position: fixed !important; left: 0 !important; top: 0 !important; z-index: 9999 !important; width: auto !important; }
  
  /* Mobile menu button */
  .mobile-menu-btn { display: flex !important; }
  
  /* Main fills screen */
  body, html { overflow-x: hidden !important; }
  main { width: 100vw !important; max-width: 100vw !important; overflow-x: hidden !important; }
  
  /* ALL grids → single column on mobile */
  div[style*="grid-template-columns"], div[style*="gridTemplateColumns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* Tables horizontal scroll */
  table, .tbl { display: block !important; overflow-x: auto !important; font-size: 11px !important; }
  
  /* Cards full width */
  .card { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  
  /* Reduce padding */
  .card, div[class*="card"] { padding: 10px !important; }
  
  /* Prevent horizontal overflow */
  div, section, main { max-width: 100vw !important; box-sizing: border-box !important; }
  
  /* 3D canvas fit */
  canvas { max-width: 100% !important; max-height: 280px !important; }
  
  /* Recharts fit */
  .recharts-wrapper, .recharts-surface, svg.recharts-surface { 
    width: 100% !important; max-width: 100% !important; 
  }
  
  /* KPI cards flex wrap */
  div[style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }
  
  /* Hide version badges on mobile */
  div[style*="fontSize: 10"][style*="letterSpacing"] { display: none !important; }
}

@media (min-width: 769px) {
  .mobile-menu-btn { display: none !important; }
}